Vue：组件

组件的分类

1.非单文件组件（一个文件有n个组件）
2.单文件组件（一个文件只有1个组）

什么是组件？

答：包含局部页面结构和资源的模块。

创建组件
局部注册 
<!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  school=Vue.extend({
    //页面模板
    template:`
     <div>
        <h1>{{schoolname}}</h1>
        <h2>{{adress}}</h2>
     </div>
    `,
    //每个组件能带自己的属性：记住一定写成函数防止引用
     data(){
      return {
        schoolname:"六中",
        adress:"福建"
      }
    }
  })

  //组件突出的特点：可以服用并且不相干扰



  let v=new Vue({
    el:"#firstVue",
    //局部注册
    components:{
      //一般使用key：vakue直接引用
      school
    }
  })
  console.log(v)
</script >
</html>
全局注册

想要使用组件需要一个大哥，并且需要在vue实例注册才可以
当有很多个vue实例想要使用同一个组件
可以进行全局注册
这样就不用单独为某个vue实例子注册

全局注册 
<!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  school=Vue.extend({
    //页面模板
    template:`
     <div>
        <h1>{{schoolname}}</h1>
        <h2>{{adress}}</h2>
     </div>
    `,
    //每个组件能带自己的属性：记住一定写成函数防止引用
     data(){
      return {
        schoolname:"六中",
        adress:"福建"
      }
    }
  })


  //对组件进行全局注册,任何实例子都能用了
  Vue.component("school",school);


  let v=new Vue({
    el:"#firstVue",
    //不需要局部注册
  })
  console.log(v)
</script >
</html>
posted @ 2021-11-09 14:38  旅祸少年  阅读(46)  评论(0)    收藏  举报