組件
-
全局注冊(cè)組件
import Vue from 'vue'
Vue.component('ceshi', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data() {
return { counter: 0 }
}
})
export default {}
那個(gè)組件需要使用就直接添加使用
<ceshi></ceshi>
-
局部注冊(cè)組件
var child = {
template: '<button>測(cè)試</button>'
}
export default {
components: {
'ceshi':child
}
}
-
父組件向子組件傳遞數(shù)據(jù) props
【3.1】props的值可以是兩種，一種是字符串?dāng)?shù)組，一種是對(duì)象
<div id="app">
<ceshi msg="來(lái)自父組件的數(shù)據(jù)"></ceshi>
</div>
Vue.component('ceshi', {
props: ['msg'],
template: '<div>{{ msg }}</div>',
})
var app = new Vue({
el: '#app'
})
【3.2】由于HTML特性不區(qū)分大小寫(xiě)，當(dāng)使用DOM模板時(shí)，駝峰命名(camelCase)的props名稱要轉(zhuǎn)為短橫分隔命名(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綁定了父級(jí)的數(shù)據(jù)parentMessage，當(dāng)通過(guò)輸入框任意輸入時(shí)，子組件接收到的props "message"也會(huì)實(shí)時(shí)響應(yīng)，并且更新組件模板。
<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】有時(shí)候，傳遞的數(shù)據(jù)并不是直接寫(xiě)死的，而是來(lái)自父級(jí)的動(dòng)態(tài)數(shù)據(jù)，這時(shí)可以使用指令v-bind來(lái)動(dòng)態(tài)綁定props的值，當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳遞給子組件
<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>
注意，如果你要直接傳遞數(shù)字、布爾值、數(shù)組、對(duì)象。而且不使用v-bind，傳遞的僅僅是字符串，如上。同一個(gè)組件使用了兩次，區(qū)別僅僅是第二個(gè)使用的是v-bind。渲染后的結(jié)果，第一個(gè)是7，第二個(gè)才是數(shù)組的長(zhǎng)度3。
