探索学习 Vue 组件篇 第四篇 组件的嵌套

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第四篇 组件的嵌套

• 这一节就是学习各组件之间的嵌套，认识组件中的王者: App；

---

需求1：学生为学校的子组件

• 定义学生组件
• 定义学校组件
• 把学生组件注册到学校组件
• 简单粗暴的上代码

  <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2>需求：</h2>
        <h2>   1、定义学校组件，</h2>
        <h2>   2、定义学生组件且学生组件为学校组件的子组件</h2>
        <app></app>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    // 定义学生组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生名称：{{studentName}}</h2>
                <h2>学生年龄：{{studentAge}}</h2>
            </div>
        `,
        data(){
            return {
                studentName: '安锐捷',
                studentAge: 3
            }
        }
    })
  
    // 定义学校组件 
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{schoolAdress}}</h2>
                <hr>
                <h2>学生组件</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
                schoolName: '天津安锐捷大学',
                schoolAdress: '普天科技园'
            }
        },
        //把学生组件注册给学校组件
        components:{ // 配置的key 、 value  key：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称
            student:student 
        }
    })
  
     new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
        },
        //注册学校组件
        components:{
            school:school,
        }
      })
  </script>
  

  • 示例效果
    

需求2：定义hello组件,跟学校平级

• 直接上代码

 <div id="root">
          <h1>你好,{{name}}</h1>
          <hr/>
          <h2>需求2：</h2>
          <h2>  定义hello组件，一个跟学校同级的组件</h2>
          <school></school>
          <hello></hello>
      </div>
  <script type="text/javascript">
      Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
      // 定义学生组件
      const student = Vue.extend({
          template:`
              <div>
                  <h2>学生名称：{{studentName}}</h2>
                  <h2>学生年龄：{{studentAge}}</h2>
              </div>
          `,
          data(){
              return {
                  studentName: '安锐捷',
                  studentAge: 3
              }
          }
      })

      // 定义学校组件 
      const school = Vue.extend({
          template:`
              <div>
                  <h2>学校名称：{{schoolName}}</h2>
                  <h2>学校地址：{{schoolAdress}}</h2>
                  <hr>
                  <student></student>
              </div>
          `,
          data(){
              return {
                  schoolName: '天津安锐捷大学',
                  schoolAdress: '普天科技园'
              }
          },
          components:{ // 配置的key 、 value  key：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称
              student:student 
          }
      })
      // hello 组件
      const hello = Vue.extend({
          template:`
              <div>
                  <h2>{{msg}}</h2>
              </div>    
          `,
          data(){
              return {
                  msg: '欢迎来天津安锐捷大学'
              }
          }
      })
     
      new Vue({
          el: "#root",
          //template: `<app></app>` // 如果容器中也不想写app ，可以直接定义在这里
          data: {
          name: "安锐捷",
          },
          //注册组件
          components:{
              hello:hello,
              school:school
          }
      })
  </script>

• 示例图
  

需求3：定义App组件,管理所有组件

• 直接上代码

  <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <!-- <h2>需求1：</h2>
        <h2>   1、定义学校组件，</h2>
        <h2>   2、定义学生组件且学生组件为学校组件的子组件</h2>
        <school></school> -->
        <h2>需求2：</h2>
        <h2>   1、定义hello组件，一个跟学校同级的组件</h2>
        <h2>需求3：</h2>
        <h2>   1、定义App(Application)组件，管理页面产生的所有组件</h2>
        <app></app>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    // 定义学生组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生名称：{{studentName}}</h2>
                <h2>学生年龄：{{studentAge}}</h2>
            </div>
        `,
        data(){
            return {
                studentName: '安锐捷',
                studentAge: 3
            }
        }
    })
    // 定义学校组件 
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{schoolAdress}}</h2>
                <hr>
                <student></student>
            </div>
        `,
        data(){
            return {
                schoolName: '天津安锐捷大学',
                schoolAdress: '普天科技园'
            }
        },
        components:{ // 配置的key 、 value  key：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称
            student:student 
        }
    })
    const hello = Vue.extend({
        template:`
            <div>
                <h2>{{msg}}</h2>
            </div>    
        `,
        data(){
            return {
                msg: '欢迎来天津安锐捷大学'
            }
        }
    })
    const app = Vue.extend({
        template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components:{
            school:school,
            hello:hello
        }
    })
     new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
        },
        //注册学校组件
        components:{
            app:app,
        }
      })
  </script>

• 示例图片
  

创作不易，欢迎 多多点赞，收藏 各节里面总结的还有不到位的欢迎指证
邮箱：pymxb1991@163.com
微信：py_mxb

十年磨一剑——唐.贾岛《剑客》