Vue中使用组件

1. 组件基础

组件也是一个vue实例,也具有methods,computed,data,计算属性等

Vue.component注册的是全局组件,在所有vue实例/组件中都能使用

2. 为什么vue的data是一个函数而不是一个对象?

使用函数能保证每个组件的data的内存是独立的而不是共用。 因为组件是可以复用的,多个组件共用数据会相互影响。

3. 父子组件通信

子组件通过props获取父组件传递的属性值,子组件通过$emit执行父组件的回调函数与父组件进行通信

3.1 子组件通过props获取父组件传递的msg

3.2 子组件通过$emit执行父组件的回调

$emit(callbackname,param1,param2…)
需要注意的是回调函数的名字不能是驼峰

4. 使用插槽

和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：

  Something bad happened.

vue提供了slot插槽用来占位

  foo is not a function

5. 局部组件和全局组件

像上面使用Vue.component组件的是全局组件,可以通过添加components属性注册局部组件

在单页应用中全局组件的打包产物会一直存在,直到根节点上的vue实例销毁,也就是说即使我当前这个页面没有用到的全局组件也会加载。通常的做法是将一些基础的、频繁使用的组件注册到全局,其余的全部注册局部组件。

6. 组件的命名规则

我们知道vue的属性(包含计算属性)和方法是不能使用驼峰命名的,而组件是支持驼峰命名的

    Vue.component('todo-item', ...);
    
    //使用驼峰命名
    Vue.component('TodoItem', ...);

7. 动态组件

vue提供了一个特殊的is属性用来渲染动态组件。动态组件的意思是:当多个组件需要依赖某个变量进行切换显示的时候,只有当前被展示的组件是存活的,其它的组件都是被销毁的状态。

    var ArticleA = {
      template: `

    
《笑傲江湖》
    
《雪山飞狐》
    
《倚天屠龙记》
    
`
    };

    var ArticleB = {
      template: `

    
《你不知道的JavaScript》
    
《前端微服务》
    
《html编程指南》
    
`
    };

    var vm = new Vue({
      el: '#app',
      data: {
        active: 'ArticleA',
      },
      components: {
        ArticleA,
        ArticleB,
      },
      methods: {
        toogleView: function () {
          this.active = this.active === 'ArticleA' ? 'ArticleB' : 'ArticleA';
        },
      },
    });

默认显示组件ArticleA,点击切换按钮的时候ArticleA组件被销毁,ArticleB组件渲染.。

8. keep-alive 缓存

前面我们提到在使用动态组件的时候,会有一个旧组件销毁新组件渲染的过程。而使用keep-alive能使旧组件不被销毁,组件被缓存起来，仍然是存活状态。

   var ComA = {
      data: function () {
        return { count: 0 };
      },
      template: '
count: {{count}} 加一
'
    };

    var ComB = {
      template: `

    
《你不知道的JavaScript》
    
《前端微服务》
    
《html编程指南》
    
`
    };

    var vm = new Vue({
      el: '#app',
      data: {
        active: 'ComA',
      },
      components: {
        ComA,
        ComB,
      },
      methods: {
        toogleView: function () {
          this.active = this.active === 'ComA' ? 'ComB' : 'ComA';
        },
      },
    });

在组件A显示的时候点击按钮将A组件的count更新为3,切到B组件再切回来,A组件的状态还在,count还是3。需要注意的是添加keep-alive的组件不会走mounted和destroy这两个生命周期，而是会走keep-alive专属的周期函数。在使用缓存渲染视图的时候走active,在退出缓存的时候走deactive。

总结:

1. 组件也是一个实例,有自己的独立的属性和状态
2. 组件的data是一个函数,这样能保证每个组件的data彼此独立而不是共用
3. 子组件通过props接收父组件传递的属性值,子组件通过$emit执行父组件的回调函数
4. 使用slot占位解析html
5. 组件分为局部组件和全局组件,通常将最基础的、频繁使用的注册为全局组件
6. 组件的命名支持驼峰和以’-'分隔
7. 使用is渲染动态组件,在切换的过程中旧组件被销毁新组件渲染