我有一个父组件和一个子组件。
父组件的模板使用一个插槽,以便一个或多个子组件可以包含在父组件中。
子组件包含一个名为“信号”的道具。
我希望能够更改父组件中名为“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>
原文由 Kunle 发布,翻译遵循 CC BY-SA 4.0 许可协议
您需要使用 作用域插槽。你快到了,我刚刚添加了创建范围的模板。
这是您更新的代码。
Vue 2.6 的发布 引入了一个统一的
v-slot
指令,可用于普通或作用域插槽。在这种情况下,由于您使用的是默认的未命名插槽,因此可以通过v-slot="{ signal }"
访问signal
属性: