组件
-
全局注册组件
import Vue from 'vue'
Vue.component('ceshi', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data() {
return { counter: 0 }
}
})
export default {}
那个组件需要使用就直接添加使用
<ceshi></ceshi>
-
局部注册组件
var child = {
template: '<button>测试</button>'
}
export default {
components: {
'ceshi':child
}
}
-
父组件向子组件传递数据 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。
