vue组件component详解

vue组件component详解

组件介绍

组件：

​ 组件是拥有一定功能多个html标签的集合体，是对html标签的封装。

好处：

​ 模板中为了实现一个(例如分页)效果，需要绘制20个html标签，如果使用组件，就设置一个标签就可以了，明显提升开发效率。

组件关键字：components、component

私有组件

声明私有组件语法：

new Vue({
  components:{
    '组件的名称': { 配置对象成员 }, 
    '组件的名称': { 配置对象成员 }...
  },
})

注意：

1. template设置的各个html标签需要有唯一的根元素节点，一般为div。
2. 组件名称建议是 xx-yy 的格式。

使用组件语法：

<组件名称></组件名称>

组件形式上就是html标签。组件的名字被当做html标签使用。

案例应用：

制作一个分页组件并使用。

  <div id="app">
    <h2>组件应用</h2>
    <com-page></com-page>
  </div>

  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      el:'#app',
      // 注册私有组件
      components:{
        'com-page':{
          // template: 设定当前组件拥有的html标签
          template:`
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
          `
        }
      },
     });
  </script>

全局组件

声明全局组件语法：

Vue.component(名称,{配置对象成员})

new Vue()

注意：

​ 全局组件需要在new Vue之前设置。

组件内部相关成员

组件是特殊的Vue实例，与Vue实例拥有着基本相同的成员，例如 data、methods、filters、directives（自定义组件）、created等等成员在组件内部都可以设置。

注意：

​ 组件data成员 与 Vue实例的不一样，需要通过 function/return 设置，具体要返回一个{}对象。

案例应用：

给分页组件设置单击事件、data成员、created生命周期方法并执行：

  <div id="app">
    <h2>组件应用-其他成员</h2>
    <com-page></com-page>
  </div>

  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      el:'#app',
      // 注册私有组件
      components:{
        'com-page':{
          template:`
            <ul>
              <li>{{ prev }}</li>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li @click="xia()">{{ next }}</li>
            </ul>
          `,
          created(){
            console.log('created已经执行了')
          },
          methods:{
            xia(){
              console.log('进入下一页')
            }
          },
          data:function(){
            return {
              prev:'上一页',
              next:'下一页',
            }
          }
        }
      },
     });
  </script>

function声明data

组件中声明的data成员，值需要是一个function，内部通过return返回{}对象供使用，这个特性必须遵守。

为什么组件的data必须是一个function：

​ 组件根据业务需要，可以被使用多次，function会使得每次组件使用的时候都亲自执行并给当前应用分配一个独立的数据对象，这样多个组件的data数据是独立的，互相没有关联、牵扯，互相不会覆盖。

​ 相反，如果直接通过{}对象给data赋值，多次使用组件会造成所有组件的data都是共享的，就是一份数据，一个组件修改data后，其他组件都受到影响，这与业务逻辑是相违背的。

组件 与 Vue实例异同：

1. 组件中的 data 必须是一个 function 并 return 一个 字面量对象。
   (Vue 实例的 data 可以是 字面量对象，也可以是 function/return形式，前者推荐使用)。
2. 组件中直接通过 template 属性来指定组件的html结构。
   Vue 实例中，一般通过 el 属性来指定渲染的容器，当然也可以使用template。
3. 组件和Vue实例拥有类似的成员，都有自己的生命周期函数，过滤器，methods、data等成员。