2019-01-29 vue组件基础篇1

组件

1. 全局注册组件

import Vue from 'vue'
Vue.component('ceshi', {
    template: '{{ counter }}',
    data() { 
          return { counter: 0 }
    }
})
export default {}

那个组件需要使用就直接添加使用

2. 局部注册组件

var child = {
  template: '测试'
}
export default {
  components: {
    'ceshi':child
  }
}

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

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

    


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

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

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

    


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

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

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

    
    


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

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

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

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