组件

1. 全局注册组件

import Vue from 'vue'
Vue.component('ceshi', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    data() { 
          return { counter: 0 }
    }
})
export default {}

那个组件需要使用就直接添加使用
<ceshi></ceshi>

2. 局部注册组件

var child = {
  template: '<button>测试</button>'
}
export default {
  components: {
    'ceshi':child
  }
}

3. 父组件向子组件传递数据 props

【3.1】props的值可以是两种，一种是字符串数组，一种是对象

<div id="app">
    <ceshi msg="来自父组件的数据"></ceshi>
</div>

Vue.component('ceshi', {
    props: ['msg'],
    template: '<div>{{ msg }}</div>',
})

var app = new Vue({
    el: '#app'
})

【3.2】由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名(camelCase)的props名称要转为短横分隔命名(kebab-case)

<div id="app">
    <ceshi camel-case="提示信息"></ceshi>
</div>

Vue.component('ceshi', {
    props: ['camelCase'],
    template: '<div>{{ camelCase}}</div>',
})

var app = new Vue({
    el: '#app'
})

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

<div id="app">
    <input type="text" v-model="parentMessage">
    <ceshi :message="parentMessage"></ceshi>
</div>

Vue.component('ceshi', {
    props: ['message'],
    template: '<div>{{ message }}</div>',
})

var app = new Vue({
    el: '#app',
    data: {
        parentMessage: ''
    }
})

【3.4】有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件

<div id="app">
    <ceshi message="[1,2,3]"></ceshi>
    <ceshi :message="[1,2,3]"></ceshi>
</div>
<script>
    Vue.component('ceshi',{
        props: ['message'],
        template: '<div>{{ message.length }}</div>'
    });
    var app = new Vue({
        el: '#app'
    })
</script>

注意，如果你要直接传递数字、布尔值、数组、对象。而且不使用v-bind，传递的仅仅是字符串，如上。同一个组件使用了两次，区别仅仅是第二个使用的是v-bind。渲染后的结果，第一个是7，第二个才是数组的长度3。