组件

一、前言

组件是可复用的 Vue 实例，可以理解为一段可复用的html模板及其数据和方法。

二、组件的注册和使用

提示：注册组件时，名称可以是TableRow，也可以是table-row的写法，最终都会识别为table-row

生成的dom是：

this is a row

可以发现，虽然dom被渲染出来了，但是位置并不正确（tr应该在tbody中），像诸如ul，ol，table等对子元素类型有要求的元素中使用组件，都可能出现这样的问题。
解决方案：

• 使用is

这样，dom会被正确渲染

• 使用template

使用template紧紧包裹组件，dom也会被正确渲染。

值得注意的是：
使用模板来解决，内容来源要是：

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)

• 父组件的count通过v-bind传递到子组件的props中的count，这样组件之间数据就进行了绑定。父组件的count改变时，子组件的count随之发生改变。

  提示：传递的参数也可以是对象或数组等。

  2. 子组件向父组件传递事件消息
     在vue中，具有单向数据流的概念，就是数据只能从父组件流向子组件，子组件不能改变父组件传递过来的数据。
     如果要改变这些数据的显示，
     要么子组件创建一个副本，通过改变这个副本，来改变数据的显示；
     要么传递事件消息给父组件，让父组件改变数据。
  • 子组件通过创建副本来改变数据

  上面代码，通过改变count的副本number来改变数据的显示。

  • 子组件通过触发父组件的事件来改变数据

  上面的流程是：

  • 子组件通过发送$emit触发父组件的对应事件

  this.$emit(add-count)

  • 父组件通过监听对应事件，捕获到请求就执行
    v-on:add-count

  注意：$emit中事件的名称不能是addCount的形式，用add-count代替
  补充：$emit可以带参数传递，$emit(event, args0, args1, ...)

  四、props

  • 静动态传值
  • 传值类型
    props可以传递所有类型的值
    特殊的是：

  post:{
    id: 'id_1'
    title: 'title_1'
  }
  
  等价于
  
  

  • 验证

  Vue.component('my-component', {
    props: {
      // 基础的类型检查 (`null` 匹配任何类型)
      propA: Number,
      // 多个可能的类型
      propB: [String, Number],
      // 必填的字符串
      propC: {
        type: String,
        required: true
      },
      // 带有默认值的数字
      propD: {
        type: Number,
        default: 100
      },
      // 带有默认值的对象
      propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定义验证函数
      propF: {
        validator: function (value) {
          // 这个值必须匹配下列字符串中的一个
          return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
      }
    }
  })
  

  • 非props特性
    一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

  上面的代码向组件传递data-date-picker特性的值，如果组件没有定义这个prop，那么它就是非props特性。这时，这个特性会被附加到组件的根元素上。

  注意：这些根元素如果存在同名冲突，会进行合并或者替换。（class和style会合并）
  如果要禁止组件继承这些特性，可以在组件中定义inheritAttrs: false
  如果要在组件中访问这些特性，可以使用$attrs别名

  Vue.component('base-input', {
    inheritAttrs: false,
    props: ['label', 'value'],
    template: `
      
        {{ label }}
        
      
    `
  })
  

  上面代码禁止了非props属性附加到组件的根元素上，而是人为使用$attrs决定附加到input上进行动态绑定。

  六、组件事件

  自定义事件使用 kebab-case 的命名方式命名。

  • 绑定原生事件

  如果要实现点击组件触发点击事件，不添加native修饰符无法触发事件。添加了native修饰符，vue把事件添加到组件根元素上。

  • v-model
    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是如单选框等表单元素可能需要的值是checked而不是value，那么就需要使用model选项说明。
  • $listeners
    这个属性可以获取组件上所有的监听器，可以用来给组件中特定元素添加原生事件。

  Vue.component('base-input', {
    inheritAttrs: false,
    props: ['label', 'value'],
    computed: {
      inputListeners: function () {
        var vm = this
        // `Object.assign` 将所有的对象合并为一个新对象
        return Object.assign({},
          // 我们从父级添加所有的监听器
          this.$listeners,
          // 然后我们添加自定义监听器，
          // 或覆写一些监听器的行为
          {
            // 这里确保组件配合 `v-model` 的工作
            input: function (event) {
              vm.$emit('input', event.target.value)
            }
          }
        )
      }
    },
    template: `
      
        {{ label }}
        
      
    `
  })
  

  提示：这里v-on="inputListeners"实际上是v-on直接绑定一个对象，这和v-bind绑定一个对象一样，会将inputListeners中所有的属性（这里属性值为事件）绑定为监听事件。

  • sync修饰符

  this.$emit('update:title', newTitle);
  
  

  子组件修改父组件数据一般通过$emit触发父组件方法，父组件监听这个自定义方法来实现。vue建议将事件命名为update:prop的形式，为此添加了sync的修饰符给父组件使用，用于监听这种形式的事件。

  注意的是，使用sync修饰符时，不能使用js表达式。比如{title: '', content: ''}或者count++等。