Vue中使用组件

1. 组件基础

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

     <div id="app">
         <todo-item :msg="message"></todo-item>
     </div>
    <script>
      //注册全局组件,任何vue实例/组件都能使用
      Vue.component('todo-item',{
        data: function(){
          return {};
        },
        props:['msg'],
        computed: {
    
        },
        template: '<div>{{msg}}<div>'
      });
      
      var vm = new Vue({
        el: '#app',
        data: {
          message: 'hello Vue!'
        },
      });
    </script>

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

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

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

3. 父子组件通信

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

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

  <div id="app">
      <todo-item :msg="message"></todo-item>
  </div>
<script>
  Vue.component('todo-item',{
    props:['msg'],
    template: '<div>{{msg}}<div>'
  });
  
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello Vue!'
    },
  });
</script>

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

  <div id="app">
    <todo-item :msg="message" v-on:todo-click="onClick"></todo-item>
  </div>
<script>
Vue.component('todo-item',{
  props:['msg'],
  template: '<button @click="handleClick">按钮</button>',
  data: function(){
    return { name: 'ian'};
  },
  methods: {
    handleClick: function(){
      //执行父组件的回调函数
      this.$emit('todo-click', this.name);
    },
  },
});

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello Vue!'
  },
  methods: {
    onClick: function(a){
      console.log('获取子组件传递的参数', a);
    },
  },
  
});
</script>

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

4. 使用插槽

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

<alert-box>
  Something bad happened.
</alert-box>

vue提供了slot插槽用来占位

<div id="app">
  <todo-item>foo is not a function</todo-item>
</div>

<script>
Vue.component('todo-item',{
  template: `<span>typeError:<span><slot></slot>`
});
var vm = new Vue({
  el:'#app',
});

</script>

5. 局部组件和全局组件

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

 <div id="app">
    <todo-item></todo-item>
    <component-a></component-a>
  </div>

  <script>
    //全局组件
    Vue.component('todo-item', {
      template: '<div>todolist</div>'
    });

    //局部组件
    const ComponentA = {
      data: function () {
        return { name: 'ian' };
      },
      template: '<div>{{name}}</div>'
    };

    var vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue'
      },
      components: {
        'component-a': ComponentA
      }
    });
  </script>

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

6. 组件的命名规则

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

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

7. 动态组件

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

    var ArticleA = {
      template: `<ul>
    <li>《笑傲江湖》</li>
    <li>《雪山飞狐》</li>
    <li>《倚天屠龙记》</li>
    <ul>`
    };

    var ArticleB = {
      template: `<ul>
    <li>《你不知道的JavaScript》</li>
    <li>《前端微服务》</li>
    <li>《html编程指南》</li>
    <ul>`
    };

    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: '<div>count: {{count}} <button @click="count++">加一</button></div>'
    };

    var ComB = {
      template: `<ul>
    <li>《你不知道的JavaScript》</li>
    <li>《前端微服务》</li>
    <li>《html编程指南》</li>
    <ul>`
    };

    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渲染动态组件,在切换的过程中旧组件被销毁新组件渲染