Vue:组件的嵌套(app组件)

什么是组件的嵌套?

答:当在一个组件里面又使用可一个组件就称为组件的嵌套


组件嵌套的案例

学校组件嵌套学生组件
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>组件的使用</h1>
   <school></school><hr/>
   <school></school><hr/>
   <school></school><hr/>
   <school></school><hr/>

</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  //建立一个学生组件
  const student=Vue.extend({
    template:`
    <h2>学生名字:{{student}}</h2>
    `,
    data(){
      return {
        student:"小红"
      }
    }

  })


  //建立一个学校组件
  const  school=Vue.extend({
    //页面模板
    template:`
     <div>
        <h1>{{schoolname}}</h1>
        <h2>{{adress}}</h2>
        <Student></Student>
     </div>
    `,
    //每个组件能带自己的属性:记住一定写成函数防止引用
     data(){
      return {
        schoolname:"六中",
        adress:"福建"
      }
    },
    //注册学生组件
    components:{
      Student:student
    }
  })


  //实例里面只需要注册·一个school即可(里面包含了student)
  let v=new Vue({
    el:"#firstVue",
    components:{
      school
    }


  })
  console.log(v)
</script >
</html>


实际开发中的app组件干什么用的?

app用来管理所有组件的组件
就是一人之下万人之上的组件
image

app组件认识
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">


</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  //建立一个学生组件
  const student=Vue.extend({
    template:`
    <h2>学生名字:{{student}}</h2>
    `,
    data(){
      return {
        student:"小红"
      }
    }

  })


  //建立一个学校组件
  const  school=Vue.extend({
    //页面模板
    template:`
     <div>
        <h1>{{schoolname}}</h1>
        <h2>{{adress}}</h2>
        <Student></Student>
     </div>
    `,
    //每个组件能带自己的属性:记住一定写成函数防止引用
     data(){
      return {
        schoolname:"六中",
        adress:"福建"
      }
    },
    //注册学生组件
    components:{
      Student:student
    }
  })

  //建立一个app组件
  const app=Vue.extend({
    template:`
    <div>
    <school></school><hr>
    <school></school><hr>
    <school></school><hr>
   </div>
    `,
    components:{
      school
    }
  })


  //实例里面只需要注册·一个school即可(里面包含了student)
  let v=new Vue({
    //这样前端就非常干净
    template:`
    <app></app>
    `,
    el:"#firstVue",
    components:{
      app
    }
  })
  console.log(v)
</script >
</html>

看到body下面的div已经被拆开了看起来干净

了解vc和vm

当一个vm实例调用了component时候请问component的this是什么?

答:是一个VueComponent对象
这个对象于vm类似可以有data,computede等等统称vc对象

posted @ 2021-11-09 15:37  旅祸少年  阅读(310)  评论(0编辑  收藏  举报