Vue 组件

注册

Components 要确保在初始化根实例之前注册了组件

全局注册：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

局部注册：

var Child = {
    template: '<div>A custom component!</div>'
}
new Vue({
  el: '#example',
  components: {
      'my-component': Child
  }
})

其他

is属性：

把自定义组件绑定在此元素上

1
2
3

<table>
  <tr is="my-row"></tr>
</table>

data

在组件中必须是函数形式

// ES5
data:function(){}
// ES6
data () {}

构成组件

props down, events up

Prop验证

Vue.component('example', {
  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 value > 10
      }
    }
  }
})

自定义事件

侦听子组件抛出的事件，必须用v-on在模板中绑定

绑定原生事件

1	v-on:click.native

子组件索引：ref

<div id="parent">
    <user-profile ref="profile"></user-profile>
</div>
<script>
    var parent = new Vue({ el: '#parent' })
    var child = parent.$refs.profile
</script>
和v-for一起用时，ref是个数组或对象

Slot

Slot 具名Slot 作用域插槽

动态组件 keep-alive

Vue 组件的 API 来自三部分： Props 允许外部环境传递数据给组件 Events 允许组件触发外部环境的副作用 Slots 允许外部环境将额外的内容组合在组件中

Vue.js 学习笔记 - 组件(Components)