slot插槽.html 833 B

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title></title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <link href="../css/style.css" rel="stylesheet"> </head>
  9. <body>
  10. <div id="myApp">
  11. <say-to pname="koma">
  12. 你的视频做的太差了。
  13. </say-to>
  14. <say-to pname="mike">
  15. 你千万不要学koma。
  16. </say-to>
  17. <say-to pname="john">
  18. 你教教他们两个吧。
  19. </say-to>
  20. </div>
  21. <script>
  22. Vue.component('say-to', {
  23. props: ['pname'],
  24. template: '<div>'
  25. + '你好,<strong>{{pname}}</strong>!'
  26. + '<slot></slot>'
  27. + '</div>',
  28. });
  29. var myApp = new Vue({
  30. el: '#myApp',
  31. });
  32. </script>
  33. </body>
  34. </html>