19.嵌套组件.html 923 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <!-- <list1/> -->
  11. <list2 />
  12. </div>
  13. <script src="./vue.js"></script>
  14. <script>
  15. const list1 = Vue.extend({
  16. template: `
  17. <div>你好, {{name}}</div>
  18. `,
  19. data(){
  20. return {
  21. name: 'John',
  22. }
  23. }
  24. });
  25. const list2 = Vue.extend({
  26. template: `
  27. <div>
  28. <list1/>
  29. 我有一个帽衫
  30. </div>
  31. `,
  32. components: {
  33. list1,
  34. },
  35. });
  36. var app = new Vue({
  37. components: {
  38. list2,
  39. },
  40. }).$mount("#app");
  41. </script>
  42. </body>
  43. </html>