最近,我发现我无法在组件插槽中使用计算属性或数据属性。即使计算是在组件中定义的,我也无法在组件的插槽中使用它。有什么办法可以使它正常工作吗?
示例代码:
Vue.component('test-component', {
template: '<div><slot></slot></div>',
computed: {
my_computed: function(){
return 2+3; // not defined in slot
}
}
})
<div id="app">
<test-component>
<span v-text="my_computed"></span>
</test-component>
</div>
在这里查看现场示例,
https://jsfiddle.net/gu9jh4n0/1/
最佳答案
您可以使用Scoped Slot来实现。
在您的示例中,您的组件将如下所示:
Vue.component('test-component', {
template: '<div><slot :computed="my_computed"></slot></div>',
computed: {
my_computed: function(){
return 2+3; // not defined in slot
}
}
});
并且主模板将检索广告位的范围并使用计算值:
<test-component>
<span slot-scope="data" v-text="data.computed"></span>
</test-component>
Live example.