vue-8-组件

注册

注册一个全局组件：Vue.component(tagName, options)

Vue.component(‘my-component‘, {
  template: ‘<div>A custom component!</div>‘
})
<div id="example">
  <my-component></my-component>
</div>

new Vue({
  el: ‘#example‘
})

局部注册：通过组件实例选项注册
var Child = {
  template: ‘<div>A custom component!</div>‘
}
new Vue({
  el: ‘#example‘，
  components: {//<my-component> 将只在父模板可用
    ‘my-component‘: Child
  }
})

使用is属性：

<table>
  <tr is="my-row"></tr>
//==<my-row>...</my-row>,table下标签有HTML的限制可以换用is的形式
</table>

使用模板，这些限制将不适用：

1. <script type="text/x-template">
2. JavaScript 内联模板字符串
3. .vue 组件

data必须是一个函数，并且，如果返回一个公共的变量，实例之间将共享数据。

props://prop 是单向绑定的

<child my-message="hello!"></child>//当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：
Vue.component(‘child‘, {
  props: [‘myMessage‘],
  template: ‘<span>{{ myMessage }}</span>‘
})

动态prop:
<div>
  <input v-model="parentMsg">
  <child :my-message="parentMsg"></child>
</div>

 props 传递所有的属性,绑定一个对象:

todo: {
  text: ‘Learn Vue‘,
  isComplete: false
}
<child v-bind="todo"></child>

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

props验证

原生构造器类型：
String 、Number、 Boolean、 Function、 Object、 Array、 Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测。

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
      }
    }
  }
})

非prop属性，也允许加入到属性，（如一些第三方组件，可以把属性直接添加到组件上 ，不需要事先定义 prop)

<bs-date-input data-3d-date-picker="true"></bs-date-input>

从父组件传来的属性值，如class会和组件模板定义的同名属性合并

自定义事件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter> //$on用来监听increment事件
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//子组件：
Vue.component(‘button-counter‘, {
  template: ‘<button v-on:click="incrementCounter">{{ counter }}</button>‘,
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit(‘increment‘) //$emit用来触发increment事件，调用incrementTotal方法
    }
  },
})
new Vue({
  el: ‘#counter-event-example‘,
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})