- 父傳子 - 在組件標(biāo)簽上通過自定義屬性的形式
:list="list"綁定數(shù)據(jù)来颤，然后在子組件中通過props接收props:[list]
示例：
1.父組件
//組件標(biāo)簽 - 父組件（綁定數(shù)據(jù)）
<template>
<div>
<app-list :list="lists" />
</div>
</template>
<script>
import appList from './list' // 引入list組件
export default {
data () { // 定義數(shù)據(jù)
return {
lists: ['熊大', '熊二', '熊三']
}
},
components: { // 實例化
appList
},
}
</script>
- 子組件
//組件標(biāo)簽 - 子組件（通過props接收）
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" >{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props:['list'], // 通過props接收
}
</script>
- 子傳父 - 在子組件中通過
this.$emit('自定義事件名稱', '要傳遞的數(shù)據(jù)')襟交，完成子組件配置驾荣，在父組件中的子組件的組件標(biāo)簽上通過@自定義事件="事件處理函數(shù)"，來完成父組件接收的任務(wù)
示例：
1.子組件
// 子組件 - 發(fā)射
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" @click="selectedVal(item)">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props:['list'],
methods: {
selectedVal (val) {
this.$emit('receive', val) // 點擊的時候傳遞 => 第一個參數(shù)：“自定義事件名稱”譬圣；第二個參數(shù)：你要傳遞的數(shù)據(jù)
}
}
}
</script>
- 父組件
// 父組件 - 接收
<template>
<div>
<app-list :list="lists" @receive="handleSelected" />
</div>
</template>
<script>
import appList from './list' // 引入list組件
export default {
data () { // 定義數(shù)據(jù)
return {
lists: ['熊大', '熊二', '熊三'],
defaultVal:"" //給顯示框定義的
}
},
components: { // 實例化
appList
},
methods:{ // 這一步是當(dāng)你點擊list里面的任意一個是時將他顯示在文本框里
handleSelected (val) {
this.defaultVal = val
}
}
}
</script>
- 兄弟之間 - 可以借助于父組件作為中轉(zhuǎn)完成通信 子 > 父 > 子
中央通信
目前中央通信是解決組件通信的最佳方法。
無需關(guān)注組件嵌套層級，也無需關(guān)注組件關(guān)系
$emit - 完成發(fā)射
$on - 監(jiān)聽
