vue组件学习-slot中的 scope

<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 属性不能去掉