KOOK(峰)
KOOK(峰)

浅谈vue组件

组件(Component) 是Vue最核心的功能，也是整个框架最精彩的地方，当然也是最难掌握的。(所有实例代码基于vue.js^2.*)

一、为什么要使用组件

vue组件的作用是提高重用性，让代码可复用

二、组件用法

 组件需要注册才能使用。组件有全局注册和局部注册两种方式。
全局注册

Vue.component("test", {
        data() {
            return {
                message: "message"
            }
        },
        template: "
我是测试组件{{message}}
"
    })

局部注册

new Vue({
        el: "#app",
        components: {
            test: {
                data() {
                    return {
                        message: "message"
                    }
                },
                template: "
我是测试组件{{message}}
"
            }
        }
    })

        注册局部组件，该组件只能再该实例作用域下有效；全局注册组件，在任何Vue实例都可以使用。

注意：若局部注册的组件名和全局注册的组件名重复，局部注册的组件会覆盖全局注册的组件

        Vue组件的模板在某些情况下会受到HTML的限制，比如

内规定只允许、
、等这些表格元素，所以在内直接使用组件是无效的。这种情况下，可以使用特殊的is属性来挂载组件。示例代码：


   
           

tbody在渲染时，会被替换为组件的内容，常见的限制元素还有

    、
      、

              这里用v-model绑定了父级的数据parentMessage，当通过输入框任意输入时，子组件接收到的props “message”也会实时响应，并更新组件模板。

      提示： 如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind，传递的仅仅是字符串，下面的示例来对比：

      同一个组件使用了两次，区别仅仅是第二个使用的是v-bind。渲染后的结果，第一个是字符串的长度7，第二个才是数组的长度3。

      单向数据流

              业务中会经常遇到两种需要改变prop的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据，引用父组件的prop。

      组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount。
      另一种情况就是prop作为需要被转变的原始值传入。这种情况用计算属性就可以了。

      提示：注意，在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。

      数据验证 

              props选项除了数组外，还可以是对象，当prop需要验证时，就需要对象写法。

              一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。
      以下是几个prop的示例：

      Vue.component('my-component', {
    props: {
        //必须是数字类型
        propA: Number,
        //必须是字符串或数字类型
        propB: [String, Number],
        // 布尔值，如果没有定义，默认值就是true
        propC: {
            type: Boolean,
            default: true
        },
        //数字，而且是必传
        propD: {
            type: Number,
            required: true
        },
        // 如果是数组或对象，默认值必须是一个函数来返回
        propE: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 自定义一个验证函数
        propF: {
            validator: function (value) {
                return value > 10;
            }
        }
    }
});

      验证的type类型可以是：

      •  String
      •  Number 
      •  Boolean 
      •  Object 
      •  Array 
      •  Function

      组件通信

              从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示：

       浅谈vue组件_第1张图片

       组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。

      自定义事件

              当子组件需要向父组件传递数据时，就要用到自定义事件。我们在介绍指令v-on时有提到，v-on除了监听DOM事件外，还可以用于组件之间的自定义事件。
              子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件。父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。

        
      
        
      总数：{{ total }}

      上面示例中，子组件有两个按钮，分别实现加1和减1的效果，在改变组件的data“counter”后，通过$emit()再把它传递给父组件，父组件用v-on:increase和v-on:reduce（示例使用的是语法糖）。$emit()方法的第一个参数是自定义事件的名称，例如示例的increase和reduce后面的参数都是要传递的数据，可以不填或填写多个(多个的话在后面用逗号隔开)。

      非父子组件通信

              在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种，兄弟组件和跨多级组件。

      中央事件总线（bus）

      推荐使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介。为了更形象地了解它，举一个生活中的例子。

              比如你需要租房子，你可能会找房产中介来登记你的需求，然后中介把你的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中介再转达给你，整个过程中，买家和卖家并没有任何交流，都是通过中间人来传话的。或者你最近可能要换房了，你会找房产中介登记你的信息，订阅与你找房需求相关的资讯，一旦有符合你的房子出现时，中介会通知你，并传达你房子的具体信息。这两个例子中，你和出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线（bus）。代码示例：

      
    {{ message }}

              先创建了一个名为bus的空Vue实例，里面没有任何内容；然后全局定义了组件component-a；最后创建Vue实例app，在app初始化时，也就是在生命周期mounted钩子函数里监听了来自bus的事件on-message，而在组件component-a中，点击按钮会通过bus把事件on-message发出去，此时app就会接收到来自bus的事件，进而在回调里完成自己的业务逻辑。
              这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。如果深入使用，可以扩展bus实例，给它添加data、methods、computed等选项，这些都是可以公用的，在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权token等。只需在初始化时让bus获取一次，任何时间、任何组件就可以从中直接使用了，在单页面富应用（SPA）中会很实用，我们会在进阶篇里逐步介绍这些内容。
              当你的项目比较大，有更多的小伙伴参与开发时，也可以选择更好的状态管理解决方案vuex，在进阶篇里会详细介绍关于它的用法。
              除了中央事件总线bus外，还有两种方法可以实现组件间通信：父链和子组件索引。

      父链

      在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件。示例代码：

      
    {{ message }}

      尽管Vue允许这样操作，但在业务中，子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件，很难理解父组件的状态，因为它可能被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过props和$emit来通信。

      子组件索引

      当子组件较多时，通过this.$children来一一遍历出我们需要的一个组件实例是比较困难的，尤其是组件动态渲染时，它们的序列是不固定的。Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称，示例代码：

      在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过`this.$refs`来访问指定名称的子组件。

      提示：$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。Vue会自动去判断是普通标签还是组件。

       四、使用slot分发内容

              当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫作内容分发（transclusion）。以为例，它有两个特点：
      组件不知道它的挂载点会有什么内容。挂载点的内容是由的父组件决定的。
      组件很可能有它自己的模板。
      props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组件也是由这3部分构成的。

      slot用法

      单个slot

              在子组件内使用特殊的元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容。示例代码：

      
    
        
      分发的内容
      
        
      更多分发的内容

              子组件child-component的模板内定义了一个``元素，并且用一个`

      `作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，那就会替换整个

      注意： 子组件内的备用内容，它的作用域是子组件本身。

      具名slot

       给元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

      
    
        
      标题
      
        
      正文内容
      
        
      更多的正文内容
      
        
      底部信息

      子组件内声明了3个元素，其中在

      内的没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。如果没有指定默认的匿名slot，父组件内多余的内容片段都将被抛弃。上例最终渲染后的结果为：

      
    
      
        
      
            
      标题
      
        
      
        
      
            
      正文内容
      
            
      更多的正文内容
      
        
      
        
      
            
      底部信息

      在组合使用组件时，内容分发API至关重要。

      作用域插槽

              作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。概念比较难理解，我们先看一个简单的示例来了解它的基本用法。示例代码：

              观察子组件的模板，在元素上有一个类似props传递数据给组件的写法msg="xxx"，将数据传到了插槽。父组件中使用了