組件關(guān)系
Vue只有兩種關(guān)系简烘， 父子組件 非父子組件
組件通信
- 父子通信
當(dāng)我們需要把父組件中的數(shù)據(jù)傳遞給子組件時(shí)，使用父子通信
父組件
const Parent = {
template: `
<div>
<child :m="msg"></child>
</div>
`,
data () {
return {
msg: "這是父組件中的數(shù)據(jù)"
}
}
}
子組件
const Child = {
template: `
<div>{{m}}</div>
`,
// 設(shè)置prop接收
props: ['m']
}
- 子父通信
當(dāng)我們要把子組件中的數(shù)據(jù)寂祥，傳遞給父組件時(shí)，使用子父通信
父組件
const Parent = {
template: `
<div>
<child :msg="msg" @send:msg="getMsg"></child>
</div>
`,
data () {
return {
msg: '父組件中的數(shù)據(jù)'
}
},
methods: {
getMsg (msg) {
this.msg = msg
}
}
}
子組件
const Child = {
template: `
<div>
{{msg}}
<button @click="changeMsg">點(diǎn)擊修改msg</button>
</div>
`,
props: ['msg'],
methods: {
changeMsg () {
// this.msg = "新的內(nèi)容" // 錯(cuò)誤的 不要在子組件中直接修改父組件中傳來的數(shù)據(jù)
// 正確的
this.$emit('send:msg', '子組件發(fā)過去的數(shù)據(jù)')
}
}
}
在組件標(biāo)簽上看到屬性向拆，那么表示對(duì)應(yīng)的父組件給子組件傳值碗暗，如果我們?cè)诮M件標(biāo)簽上看到@xxx="函數(shù)" 表示父組件在監(jiān)聽子組件的自定義事件
<child @click="fn"></child>
<!-- 這個(gè)click不是原生事件，是自定義事件 -->
<child @click.native="fn"></child>
<!-- 如果添加了.native才會(huì)執(zhí)行原生的點(diǎn)擊事件 -->
- 非父子通信
利用的是自定義事件人乓，因?yàn)樽远x事件的監(jiān)聽和觸發(fā)必須得是同一個(gè)this戳护，所以我們需要一個(gè)公共的vue實(shí)例，稱其為bus
bus
const bus = new Vue()
組件1
const com1 = {
template: `
<div>
<button @click="changemsg">點(diǎn)擊修改組件2中的數(shù)據(jù)</button>
</div>
`,
methods: {
changemsg () {
bus.$emit('changeMsg', '數(shù)據(jù)')
}
}
}
組件2
const com2 = {
template: `
<div>{{msg}}</div>
`,
data () {
return {
msg: '消息'
}
},
created () {
bus.$on('changeMsg', (msg) => {
this.msg = msg
})
}
}
mvvm圖示.png
