如何从插槽中访问元件数据？
如何从插槽中访问元件数据？
提问于 2017-01-30 19:40:53
它不工作：https://jsfiddle.net/2ouxsuLh/
var myAwesomeComponent = Vue.component({
template: '<div><slot></slot></div>',
data: function () {
return {
myAwesomeData: 'Message'
}
}
});
new Vue({
el: '#app',
template: '<my-awesome-component>{{ myAwesomeData }}</my-awesome-component>',
components: {
myAwesomeComponent: myAwesomeComponent
}
});这是因为myAwesomeData没有在父组件中定义，并且我们不能使用组件的变量。
相反，我们需要创建我们自己的组件，并将其传递到我的-awesome组件中，如下所示：https://jsfiddle.net/simplesmiler/5p420nbe/
但这是开销，不是吗？
例如，在angular中，我们可以这样做：http://jsfiddle.net/ADukg/9609/要简单得多。
我们可以在Vue做这样的事情吗？
回答 1
Stack Overflow用户
发布于 2017-01-30 23:37:57
您可以使用scoped slots来近似您的Angular示例。子标记在其模板中定义了一个slot，并且作为slot标记的属性，它定义了父标记可以使用的数据。父级传递一个模板作为插槽填充器。模板可以通过scope属性引用子级定义的数据。
var myAwesomeComponent = {
template: '<div><slot myAwesomeData="Directive Message"></slot></div>'
};
new Vue({
el: '#app',
components: {
test: myAwesomeComponent
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
<test>
<template scope="props">
{{ props.myAwesomeData }}
</template>
</test>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41935027
复制相关文章
相似问题
腾讯云开发者
