親から子へのスロットを使って小道具を渡す方法-vuejs

Question

私は親コンポーネントと子コンポーネントを持っています。

親コンポーネントのテンプレートはスロットを使用して、1つ以上の子コンポーネントを親の内部に含めることができます。

子コンポーネントには「信号」という小道具が含まれています。

親コンポーネントで 'parentVal'という名前のデータを変更して、子のシグナルのpropが親の値で更新されるようにしたいと考えています。

それは単純なものでなければなりませんが、私はこの使用してスロットを行う方法を見つけ出すことはできませんように。これは思える：

あなたが使用する必要が

const MyParent = Vue.component('my-parent', { 
 
    template: `<div> 
 
    \t \t  <h3>Parent's Children:</h3> 
 
    \t \t \t \t <slot :signal="parentVal"></slot> 
 
    \t \t </div>`, 
 

 
    data: function() { 
 
    return { 
 
     parentVal: 'value of parent' 
 
    } 
 
    } 
 
}); 
 

 

 
const MyChild = Vue.component('my-child', { 
 
    template: '<h3>Showing child {{signal}}</h3>', 
 
    props: ['signal'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    MyParent, 
 
    MyChild 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <my-parent> 
 
    <my-child></my-child> 
 
    <my-child></my-child> 
 
    </my-parent> 
 
</div>

Answer 1

：ここ は、以下の実行している例です。 a scoped slot。あなたはほとんどそこにいました、私はちょうどスコープを作成するテンプレートを追加しました。

<my-parent> 
    <template scope="{signal}"> 
     <my-child :signal="signal"></my-child> 
     <my-child :signal="signal"></my-child> 
    </template> 
    </my-parent> 

ここにコードが更新されました。

const MyParent = Vue.component('my-parent', { 
 
    template: `<div> 
 
    \t \t  <h3>Parent's Children:</h3> 
 
    \t \t \t \t <slot :signal="parentVal"></slot> 
 
    \t \t </div>`, 
 

 
    data: function() { 
 
    return { 
 
     parentVal: 'value of parent' 
 
    } 
 
    } 
 
}); 
 

 

 
const MyChild = Vue.component('my-child', { 
 
    template: '<h3>Showing child {{signal}}</h3>', 
 
    props: ['signal'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    MyParent, 
 
    MyChild 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <my-parent> 
 
    <template scope="{signal}"> 
 
     <my-child :signal="signal"></my-child> 
 
     <my-child :signal="signal"></my-child> 
 
    </template> 
 
    </my-parent> 
 
</div>