3.Vue组件化 - 3.3 组件嵌套 - 《Java 学习笔记》

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      // 创建 Y1 组件
      const y1 = {
        template : ` 
 <div>
 <h3>Y1 组件</h3>
 </div>
 `
      }
      // 创建 X1 组件
      const x1 = {
        template : ` 
 <div>
 <h3>X1 组件</h3>
 </div>
 `
      }
      // 创建 Y 组件
      const y = {
        template : ` 
 <div>
 <h2>Y 组件</h2>
 <y1></y1>
 </div>
 `, 
        components : {y1}
      }
      // 创建 X 组件
      const x = {
        template : ` 
 <div>
 <h2>X 组件</h2>
 <x1></x1>
 </div>
 `, 
        components : {x1}
      }
      // 创建 app 组件
      const app = {
        template : ` 
 <div>
 <h1>App 组件</h1>
 <x></x>
 <y></y>
 </div>
 `, 
        // 注册 X 组件
        components : {x,y}
      }
      // vm
      const vm = new Vue({
        el : '#root', 
        template : ` 
 <app></app>
 `,
        // 注册 app 组件
        components : {app}
      })
    </script>
  </body>
</html>
嵌套结构：这种结构更加贴切实际项目的开发