1.props和$emit
父組件向子組件傳遞數(shù)據(jù)是通過(guò)prop傳遞的，子組件傳遞數(shù)據(jù)給父組件是通過(guò)$emit觸發(fā)事件來(lái)做到的
Vue.component(
"child",{
data () {
return { mymessage:this.message } }, template:` <div> <input
type=
"text" v-model=
"mymessage" @input=
"setFather(mymessage)"> </div> `, props:{ message:String }, methods:{
setFather (val){ this.
$emit(
"getChildData",val) } } }) Vue.component(
"parent",{ data:
function () {
return { messageFather:
"兒子,我是你爸爸啊" } }, template:` <div> <p> this is parentcomponent!</p> <child :message=
"messageFather" @getChildData=
"getChildData"></child> </div> `, methods:{ getChildData(val){ console.log(val) } } }) var app = new Vue({ el:
"#app", })
復(fù)制代碼2.$attrs和$listeners
第一種方式處理父子組件之間的數(shù)據(jù)傳輸有一個(gè)問(wèn)題：如果父組件A下面有子組件B，組件B下面有組件C,這時(shí)如果組件A想傳遞數(shù)據(jù)給組件C怎么辦呢？ 如果采用第一種方法，我們必須讓組件A通過(guò)prop傳遞消息給組件B，組件B在通過(guò)prop傳遞消息給組件C；要是組件A和組件C之間有更多的組件，那采用這種方式就很復(fù)雜了。Vue 2.4開(kāi)始提供了$attrs和$listeners來(lái)解決這個(gè)問(wèn)題，能夠讓組件A之間傳遞消息給組件C
<script> Vue.component(
"childs",{
data() {
return{ mymessages:
"我可能要接受到來(lái)自我爺爺?shù)南?#34; } }, template:` <div> <p>我是兒子的兒子</p> <input
type=
"text" v-model=
"$attrs.messageChilds" @input=
"getGrandChild($attrs.messageChilds)"> </div> `, methods:{ getGrandChild(val){ this.
$emit(
"getGrandChild",val) } } }) Vue.component(
"child",{
data () {
return { mymessage:this.message } }, template:` <div> <input
type=
"text" v-model=
"mymessage" @input=
"setFather(mymessage)"> <childs v-bind=
"$attrs" v-on=
"$listeners"></childs> </div> `, props:{ message:String }, methods:{
setFather (val){ this.
$emit(
"getChildData",val) } } }) Vue.component(
"parent",{ data:
function () {
return { messageFather:
"兒子,我是你爸爸啊", messageGrandFather:
"孫子我是你爸爸啊" } }, template:` <div> <p> this is parentcomponent!</p> <child :messageChilds=
"messageGrandFather" :message=
"messageFather" @getChildData=
"getChildData" @getGrandChild=
"getGrandChild"></child> </div> `, methods:{ getChildData(val){ console.log(val) }, getGrandChild(val){ console.log(val) } } }) var app = new Vue({ el:
"#app", }) </script>
復(fù)制代碼此方法是通過(guò)想目標(biāo)的子組件 綁定 v-bind="$attrs"? 與 v-listeners; 而子組件過(guò)的數(shù)據(jù)為$.attrs的對(duì)象,數(shù)據(jù)為 $attrs.messageChild,實(shí)現(xiàn)數(shù)據(jù)的接受,而子組件傳遞給父組件則是通過(guò)$meit傳遞事件來(lái)向父組件傳遞相應(yīng)的數(shù)據(jù).
3. 中央事件總線
上面兩種方式處理的都是父子組件之間的數(shù)據(jù)傳遞，而如果兩個(gè)組件不是父子關(guān)系呢？這種情況下可以使用中央事件總線的方式。新建一個(gè)Vue事件bus對(duì)象，然后通過(guò)bus.$emit觸發(fā)事件，bus.$on監(jiān)聽(tīng)觸發(fā)的事件。
<script> Vue.component(
"brotherb",{
data () {
return { mymessageBrotherB:
"我是brotherb", brothera:
'' } }, template:` <div> <p>{{mymessageBrotherB}}</p> <p>{{brothera}}</p> </div> `, props:{ message:String, },
mounted(){ bus.
$on(
'globalEvent',(val)=>{ this.brothera=val }) } }) Vue.component(
"brothera",{ data:
function () {
return { messageBrotherA:
"我是brotherA", mymessage:
"你好 ,brotherB" } }, template:` <div> <p>{{messageBrotherA}}</p> <input
type=
"text" v-model=
"mymessage" @input=
"passData(mymessage)"> </div> `, methods:{ passData(val){ bus.
$emit(
"globalEvent",val) } } }) //中央事件總線 const bus=new Vue(); const app = new Vue({ el:
"#app", }) </script>
復(fù)制代碼首先我們或創(chuàng)建一個(gè) bus實(shí)例, 父組件在mthods方法中,通過(guò)bus.$emit()中傳遞事事件攜帶參數(shù),然后兄弟組件mounted鉤子函數(shù)中 通過(guò)bus.$on()接受事件和方法.
4. provide和inject
父組件中通過(guò)provider來(lái)提供變量，然后在子組件中通過(guò)inject來(lái)注入變量。不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來(lái)獲取數(shù)據(jù)，只要在父組件的生命周期內(nèi)，子組件都可以調(diào)用。
<script> Vue.component(
"child",{ inject:[
'for'],
data () {
return { mymessage:
"我是兒子", messageFather:this.for } }, template:` <div> <p>{{mymessage}}</p> {{messageFather}} </div> `,
mounted(){ } }) Vue.component(
"parent",{ data:
function () {
return { mymessage:
"我是父親" } }, provide:{
for:
"你好兒子啊" }, template:` <div> <p>{{mymessage}}</p> <child></child> </div> `, methods:{ } }) const app = new Vue({ el:
"#app", }) </script>
復(fù)制代碼5. v-model
父組件通過(guò)v-model傳遞值給子組件時(shí)，會(huì)自動(dòng)傳遞一個(gè)value的prop屬性，在子組件中通過(guò)this.$emit(‘input',val)自動(dòng)修改v-model綁定的值
Vue.component(
"child",{ props:{ value:String },
data () {
return { mymessage:this.value, } }, template:` <div> <input
type=
"text" v-model=
"mymessage" @change=
"changeValue"> </div> `,
mounted(){ }, methods:{
changeValue() { this.
$emit(
'input',this.mymessage) } } }) Vue.component(
"parent",{ data:
function () {
return { message:
"son", } }, template:` <div> <p>{{message}}</p> <child v-model=
"message"></child> </div> `, methods:{ } }) const app = new Vue({ el:
"#app", }) </script>
復(fù)制代碼6. $parent和$children
<script> Vue.component(
"child",{
data () {
return { mymessage:
"我是兒子", } }, template:` <div> <input
type=
"text" v-model=
"mymessage" @change=
"changeParent"> </div> `,
mounted(){ }, methods:{
changeParent () { this.
$parent.message=this.mymessage } } }) Vue.component(
"parent",{ data:
function () {
return { message:
"我是父親", } }, template:` <div> <p>{{message}}</p> <button @click=
"changeBtn">改變兒子</button> <child></child> </div> `, methods:{
changeBtn () { this.
$children[0].mymessage=
"hello" } } }) const app = new Vue({ el:
"#app", }) </script>
復(fù)制代碼父組件通過(guò)methods事件 通過(guò)事件 觸發(fā) this.$children[1].message="hello"來(lái)向子組件中傳遞值,1為父組件中第一個(gè)子組件,
子組件通過(guò)this.$parent.message=this.mymessage來(lái)修改? 父組件中message 的值.
7. vuex處理組件之間的數(shù)據(jù)交互
如果業(yè)務(wù)邏輯復(fù)雜，很多組件之間需要同時(shí)處理一些公共的數(shù)據(jù)，這個(gè)時(shí)候才有上面這一些方法可能不利于項(xiàng)目的維護(hù)，vuex的做法就是將這一些公共的數(shù)據(jù)抽離出來(lái)，然后其他組件就可以對(duì)這個(gè)公共數(shù)據(jù)進(jìn)行讀寫(xiě)操作，這樣達(dá)到了解耦的目的。
總結(jié)
以上是生活随笔為你收集整理的Vue组件通信的7个方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
