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