组件:slot插槽

知识点

  • slot

slot

slot是父组件与子组件的通讯方式,可以将父组件的内容显示在子组件当中。

综合例

  1. <div id="myApp">
  2. <say-to pname="koma">
  3. 你的视频做的太差了。
  4. </say-to>
  5. <say-to pname="mike">
  6. 你千万不要学koma。
  7. </say-to>
  8. <say-to pname="john">
  9. 你教教他们两个吧。
  10. </say-to>
  11. </div>
  12. <script>
  13. Vue.component('say-to', {
  14. props: ['pname'],
  15. template: '<div>'
  16. + '你好,<strong>{{pname}}</strong>!'
  17. + '<slot></slot>'
  18. + '</div>',
  19. });
  20. var myApp = new Vue({
  21. el: '#myApp',
  22. });
  23. </script>