vue组件

关于vue组件的总结

注册组件

vue中组件的注册分为两种：

全局注册
局部注册

全局注册

全局注册的组件在任何vue实例中都能使用
调用vue的component方法就可以全局注册组件
component方法接收两个参数：
- 参数一：组件名
- 参数二：对象，对象中包含了组件模板，data，methods等属性，与vue实例相同

 Vue.component('g-div',{
    template: `这是一个自定义组件`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })

上面代码定义了一个名为g-div的自定义组件，然后可以在DOM元素中的vue实例中使用它了

局部注册

局部注册只能在vue实例中进行
局部注册的组件只有它所在的vue实例可以使用
在vue实例中定义component属性就可以进行局部注册

let app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `这是局部注册的组件，只能在当前Vue实例中使用`,
      }
    }
  })

ps：组件的模板中只允许有一个根元素，所有的元素都必须由一个元素包裹，否则编译时会报错

组件中的data

组件中的data必须是一个函数，这个函数返回一个对象，对象里面就是你所写的数据！！！

为什么组件中的data必须是一个函数呢？
因为在页面中可能会多次复用这个组件，如果data是一个对象，那么所有组件共享这个对象，任一组件的data发生变化便会影响到其他组件。

若组件中的data是一个返回对象的函数，那么每次使用组件时便会创建一个新的对象，达到每个组件对应一个对象，不会产生因数据共享而衍生的bug。

组件受限

在某些情况下我们无法正常的使用组件，比如当组件的父元素的ul、table时，我们无法正常使用组件，因为这些元素的内部只能写入特定的子元素，比如table中只允许存在tbody、td等子元素。

可我就是想在这些元素内部使用组件怎么办？
答：使用is属性

父组件与子组件的沟通：props

在很多场景下，我们需要父组件向子组件传递自身的数据，这个时候我们需要在子组件中定义props属性来接收数据。
props传递数据是单向的，只能由父组件向子组件传递数据。

我们也可以将接收到的数据保存到子组件的data中。

Vue.component('g-div',{
    template: `{{parentMessage}}`,
    props: ['parentMessage'],
    data(){
        return {
            childMessage:this.parentMessage     //可以通过this.xxx来获取接收到的数据
        }
    }
})

如果props作为需要被转变的原始值传入，这种情况下我们可以使用计算属性

大小写的问题

在定义的组件，组件名若使用驼峰命名，在html中要使用短横线命名。

在组件中，父组件给子组件传递数据必须使用短横线，在template中使用文本插值的形式时，只能使用驼峰，其他书写方式可能会产生错误。

在组件的data中，若是使用this.xxx接收数据，必须使用驼峰命名，不能使用短横线命名。

数据验证

props可以验证传递进来的数据类型

当你需要验证数据类型时，props必须是对象。

自定义事件--子组件给父组件传递数据

使用v-on除了监听DOM事件外，还可以用于组件之间的自定义事件，
JS的设计模式——观察者模式，dispatchEvent和addEventListentr这两个方法，前者用于触发事件，后者用于添加事件监听，vue组件也有与之类似的模式，子组件用$emit来触发事件，父组件用$on来监听子组件事件。


      当前余额为：{{balance}}

第一步：自定义事件
第二步：在子组件中用$emit触发事件，第一个参数为事件名，后面的参数为要传递的数据。
第三部：在父组件中监听这个事件

子组件间的通信

子组件之间的通信需要在根组件中定义一个新的vue实例作为我们的事件承载中心。

箭头函数没有this，只会从自己的作用域链的上一层继承this

父链：this.$parent，在子组件中使用，可以获取到父组件的内容


      ---{{msg}}

子链：this.$refs


  ---{{msg}}

插槽

为了让组件可以组合，我们需要一种方式来混和父组件的内容与子组件自己的模板。这个过程被称为内容分发，vue.js实现了一个内容分发API，使用slot元素作为原始内容的插槽。

首先我们需要明确内容在那个作用域里编译，假设模板为


  
    {{msg}}

msg是绑定到父组件的数据还是绑定到子组件的数据？答案是父组件。组件作用域简单地说就是：

父组件模板的内容在父组件作用域内编译
子组件模板的内容在子组件作用域内编译

让我们再回到上面的代码，所以此时app内的所有内容，都在父组件作用域内

插槽的用法
插槽的作用：父组件的内容和子组件相混合，从而弥补视图的不足，说明白了就是子组件内可以写入父组件的内容。


  
    {{msg}}

具名插槽
在slot标签上添加name属性，在插入的标签上添加slot="xxx"


  
    我是标题
    我是正文
    正文第二部分
    我是底部信息

此时渲染出来的DOM结构如下：

DOM结构

作用域插槽
作用：从子组件获取数据

访问slot
通过this.$slot访问


  
    我是标题
    我是正文
    正文第二部分
    我是底部信息

动态组件

Vue给我们提供了一个元素叫component，用来动态的挂载不同的组件
实现：使用is特性来实现