Vueラーニングノート(4)スロット、マルチレベルコンポーネントデータ転送
16872 ワード
八、スロット 8.1匿名スロットスロットは、コンポーネントを使用するときにコンポーネントにいくつかのコンテンツを追加できるように、コンポーネントに1つの場所を予約します.スロットはデフォルトのデータを指定し、使用者がスロットを使用しない場合はデフォルトの内容を表示します.コンポーネントに匿名スロットがいくつか書かれていると、ユーザーが入力データは をいくつか表示します. 8.2名前付きスロットスロットスロットスロットは、スロットを定義するときにスロットにname属性を指定し、名前付きスロットを指定できます.追加した内容を対応するスロットに挿入するには、slotプロパティ に追加されます. 8.3 v-slotコマンドは、slotプロパティを使用してコンテンツをどのスロットに配置するかを指定するほか、v-slotコマンドを使用することもできます.v-slotコマンドはtemplateラベルにのみ使用できます....v-slotは、#スロット名と書くこともできます. 8.4アクティブドメインスロット 役割ドメインスロットとは?アクティブドメインスロットとは、データを有するスロットであり、親コンポーネントがサブコンポーネントの内容を充填する際にもサブコンポーネントのデータ を使用できるようにするものである.役割ドメインスロットの使用方法slotでv-bind:データ名="データ名"でデータを露出する親コンポーネントにおいて受信データはv-slotでslot-scopeを置き換えることができ、親コンポーネントにおけるtemplate>で役割ドメイン名を用いる.データ名を使用アクティブドメインスロット適用シーン:サブコンポーネントはデータを提供し、親コンポーネントは をレンダリングします.
九、マルチレベルデータ伝達 vueでは、親コンポーネント、子コンポーネント1、子コンポーネント2があり、子コンポーネント1のデータを子コンポーネント2に渡すには、親コンポーネントにデータを渡し、親コンポーネント2にデータを渡す必要があります.兄弟コンポーネントと世代間コンポーネントは、直接データを転送することはできません.段階的に転送します. 以下の場合、son 2コンポーネントにはinput入力ボックスがあり、増加/減少ボタンをクリックするとinputにバインドされたcountが増加/減少します.需要:son 2コンポーネントにson 1のcountデータを表示します. son 1のcountをfartherコンポーネントに渡す.fartherコンポーネントでnumとメソッドchange()を定義し、change()をson 1コンポーネントにバインドします.son 1コンポーネントは、増加/減少イベントをトリガーしたときに親コンポーネントにイベントを送信し、countを親コンポーネントに渡します.this.$emit(‘par’, this.count); 親コンポーネントのnum保存count 親コンポーネントでcountを保存したnum,:par-num=「num」をson 2コンポーネントに渡し、son 2コンポーネントでporpsでparNum(名前付き注意点)を受信することで、son 2コンポーネントでson 1のcountデータを使用することができます!
以上がマルチレベルコンポーネントのデータ伝達で、とても面倒です!マルチレベルコンポーネントのデータとメソッドの伝達を簡単にする方法はありますか?あります!これから習うVuexです!
と書く必要があります.書き込みなしslotプロパティは匿名スロット
<div id="app">
<cpn>
<div> </div>
<div slot="one"> </div>
<template v-slot="two">
<div> </div>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<p> </p>
//slot
<slot></slot>
<slot name="one"></slot>
<slot name="two"></slot>
<p> </p>
</div>
</template>
<script>
Vue.component('cpn',{
template: "#cpn"
});
let vue = new Vue({
el: '#app',
});
</script>
九、マルチレベルデータ伝達
<div id="app">
<farther></farther>
</div>
<template id="farther">
<div>
<p>{{num}}</p>
<son1 @par="change"></son1> // count son1 farther
<son2 :par-num="num"></son2> // count farther son2
</div>
</template>
<template id="son1">
<div>
<button @click="increment"> </button>
<button @click="decrement"> </button>
<input type="text" :value="count">
</div>
</template>
<template id="son2">
<div>
<p>{{ parNum }}</p> //
</div>
</template>
<script>
Vue.component('farther',{
template: "#farther",
data(){
return{
num: 0
}
},
methods:{
change(curCount){
this.num = curCount;
}
},
components: {
'son1': {
template: "#son1",
data(){
return{
count: 0
}
},
methods:{
increment(){
this.count++;
this.$emit('par', this.count)
},
decrement(){
this.count--;
this.$emit('par',this.count)
}
}
},
'son2': {
template: "#son2",
props:['parNum']
}
}
});
let vue = new Vue({
el: '#app',
});
</script>
以上がマルチレベルコンポーネントのデータ伝達で、とても面倒です!マルチレベルコンポーネントのデータとメソッドの伝達を簡単にする方法はありますか?あります!これから習うVuexです!