24_components_组件嵌套.html 999 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. <script src="./js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <com1></com1>
  12. <!-- <com2></com2> -->
  13. </div>
  14. <!-- 外层组件 -->
  15. <template id="com1">
  16. <div class="container">
  17. <h1>hello</h1>
  18. <com2></com2>
  19. </div>
  20. </template>
  21. <!-- 内层组件 -->
  22. <template id="com2">
  23. <div class="container">
  24. <h2>world</h2>
  25. </div>
  26. </template>
  27. <script>
  28. let app = new Vue({
  29. el: '#app',
  30. components:{
  31. com1:{
  32. template:'#com1',
  33. components:{
  34. com2:{
  35. template:'#com2'
  36. }
  37. }
  38. }
  39. }
  40. })
  41. </script>
  42. </body>
  43. </html>