Vue组件

什么是组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树

组件和模块

• 模块：侧重于功能或者数据的封装
• 组件：包含了 template、style 和 script，而它的 script 可以由各种模块组成

[图片上传失败...(image-62ea20-1556002017740)]

Vue中的组件开发

组件是可复用的 Vue 实例，且带有一个名字，比如 <my-breadcrumb>。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用。

组件参考文档

全局组件

Vue.component('my-breadcrumb', {
      template: `<div>
          <span>{{ level1 }}</span>
          <span>/</span>
          <span @click="t">{{ level2 }}</span>
        <div>`,
      data() {
        return {
          level1: '用户管理1',
          level2: '用户列表1'
        };
      },
      methods: {
        t() {
          alert('hello');
        }
      }
    });

注意：

1. 组件的模板中必须有且只有一个根标签
2. 组件是一个特殊的Vue实例
3. 组件中的data是一个方法，目的是让每一个组件维护一个自己的数据
4. 组件有自己的作用域

私有组件

// 私有组件
var ComponentA = {
    template: '<div>{{ msg }}</div>',
    data() {
        return {
            msg: 'hello'
        };
    }
};
var vm = new Vue({
    el: '#app',
    components: {
        'component-a': ComponentA
    }
});

通过Props给子组件传值

1. 子组件可以通过 props 选项接收一个一些值，通过 props 传递的值变成了改组件的一个属性。

   var ComponentA = {
       template: '<div>{{ title }}</div>',
       props: ['title'],
   };
   

2. 当然子组件具有 props 选项后，数据可以通过标签的自定义属性传递给子组件

   <component-a :title="msg"></component-a>
   

3. 在vue的实例中提供该属性值

   var vm = new Vue({
       el: '#app',
       data: {
           msg: 'hello heima',
       },
       components: {
           'component-a': ComponentA
       }
   });