如何使用從父母到孩子的插槽道具-vuejs

我有一個父組件和一個子組件。

父組件的模板使用一個插槽，以便父代中可以包含一個或多個子組件。

子組件包含一個名爲'信號'的道具。

我希望能夠更改父組件中名爲'parentVal'的數據，以便使用父項的值更新子項的信號道具。如何使用從父母到孩子的插槽道具-vuejs

這似乎應該是簡單的東西，但我無法弄清楚如何做到這一點使用插槽：這裏是下面運行的例子：

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>

來源

2017-07-19 Kunle

您需要使用一個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>

來源

2017-07-19 02:52:21 Bert

如何使用從父母到孩子的插槽道具-vuejs

回答

相關問題