19.嵌套组件.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. <style>
  8. </style>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <list2></list2>
  13. </div>
  14. <script src="./vue.js"> </script>
  15. <script>
  16. const list1 = Vue.extend({
  17. template: `
  18. <h1>{{msg}}</h1>
  19. `,
  20. data() {
  21. return {
  22. msg: "Hello"
  23. }
  24. }
  25. // data:{
  26. // msg:""
  27. // }
  28. })
  29. const list2 = Vue.extend({
  30. template: `
  31. <div>
  32. <list1></list1>
  33. <h1>{{msg}}</h1>
  34. </div>
  35. `,
  36. data() {
  37. return {
  38. msg: "哇"
  39. }
  40. },
  41. components: {
  42. list1
  43. }
  44. // data:{
  45. // msg:""
  46. // }
  47. })
  48. var vm = new Vue({
  49. el: "#app",
  50. components: {
  51. list2
  52. }
  53. })
  54. </script>
  55. </body>
  56. </html>