我有一个父组件和一个子组件。
父组件的模板使用一个插槽,这样一个或多个子组件可以包含在父组件中。
子组件包含一个称为“信号”的道具。
我希望能够在父组件中更改名为“ parentVal”的数据,以便用父的值更新子代的信号道具。
似乎应该很简单,但我无法弄清楚如何使用插槽来完成此操作:以下是一个正在运行的示例:
const MyParent = Vue.component('my-parent', {
template: `<div>
<h3>Parent's Children:</h3>
<slot :signal="parentVal"></slot>
</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>