<div id="app">
<child-component>
<template scope="props">
<p>来自父组件的内容</p>
<p>{{props.msg}}</p>
</template>
</child-component>
</div>
js
Vue.component('child-component', {
template: '<div><div><slot msg="获取子组件的内容"></slot></div></div>'
})
var app = new Vue({
el: '#app'
})
显示结果:
来自父组件的内容
获取子组件的内容
说明 :
子组件 slot 属性 msg 如何传递给 父组件
通过 父组件的 template 标签 中 scope 定义一个插槽
相当于临时变量 通过 props.msg 获取子组件 属性值
主要 父组件 template 属性不能去掉