組件通信可以分為父子組件通信、非父子組件通信,可以是數(shù)據(jù)的傳遞,也可以是方法的傳遞,先介紹數(shù)據(jù)的相互傳遞,再介紹方法的相互傳遞。
父組件到子組件傳遞數(shù)據(jù): 一、通過props,父組件可以傳遞動(dòng)態(tài)和靜態(tài)數(shù)據(jù)。
//父組件
<template><div id=
"app" >//第一種靜態(tài)數(shù)據(jù) <HelloWorld msg=
"我是父組件的數(shù)據(jù)" />//第二種動(dòng)態(tài)綁定 <HelloWorld :msg=
"message" /></div>
</template><script>
import HelloWorld from
'./components/HelloWorld.vue' export default {name:
'app' ,
data (){
return {message:
'我來自父組件' }},components: {HelloWorld}
}
</script>
復(fù)制代碼
//子組件
<template><div class=
"hello" >來自父組件的值:{{msg}}</div>
</template><script>
export default {name:
'HelloWorld' ,props: [
'msg' ]//或者 props: { msg: String//指定傳入的類型 }//或者 props: { msg: String,default:
'默認(rèn)值' //指定默認(rèn)值 }
}
</script>
復(fù)制代碼
二、provide / inject
provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中。并且這對(duì)選項(xiàng)需要一起使用,以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時(shí)間里始終生效。
//父組件
<template><div><child-dom></child-dom></div>
</template>
<script>import childDom from
"./components/ChildDom.vue" ;
export default {
data () {
return {}},provide: {house:
'房子' ,car:
'車子' ,money:
'¥10000' },methods:{},components:{childDom},}
</script>
復(fù)制代碼
//子組件
<template><div></div>
</template>
<script>
export default {
data () {
return {}},inject: {house: {default:
'沒房' },car: {default:
'沒車' },money: {default:
'¥4500' }},
created () {console.log(this.house, this.car, this.money)},methods:{}}
</script>
復(fù)制代碼
子組件傳值給父組件 一、通過props的回調(diào)
//父組件
<template><div id=
"app" ><HelloWorld :msg=
"message" /></div>
</template><script>
import HelloWorld from
'./components/HelloWorld.vue' export default {name:
'app' ,
data (){
return {}},methods: {message: (data)=>{console.log(
'我是父組件的方法,在子組件中被觸發(fā)了' )console.log(
'來自子組件的值是:' +data)}},components: {HelloWorld}
}
</script>
復(fù)制代碼
//子組件
<template><div class=
"hello" @click=
"msg('來自子組件的值~~')" >來自父組件的方法,點(diǎn)我執(zhí)行</div>
</template><script>
export default {name:
'HelloWorld' ,props: [
'msg' ]
}
</script>
復(fù)制代碼
二、通過$emit
//父組件
<template><div id=
"app" ><HelloWorld @getData=
"message" /></div>
</template><script>
import HelloWorld from
'./components/HelloWorld.vue' export default {name:
'app' ,
data (){
return {}},methods: {message: (data)=>{console.log(
'來自子組件的值是:' +data)}},components: {HelloWorld}
}
</script>
復(fù)制代碼
//子組件
<template><div class=
"hello" @click=
"goFun" >點(diǎn)擊傳值給父組件</div>
</template><script>
export default {name:
'HelloWorld' ,
data (){
return {s: 1111}},methods: {
goFun (){this.
$emit (
'getData' ,this.s)}}
}
</script>
復(fù)制代碼
三、.sync修飾實(shí)現(xiàn)雙向綁定
//父組件
<template><div id=
"app" ><HelloWorld :show.sync=
'valueChild' />父組件值:{{valueChild}}<button @click=
"changeValue" >點(diǎn)擊</button></div>
</template><script>
import HelloWorld from
'./components/HelloWorld.vue' export default {name:
'app' ,
data (){
return {valueChild:
true }},methods: {
changeValue (){console.log(
'父組件的值被修改:' +this.valueChild)this.valueChild =!this.valueChild}},components: {HelloWorld}
}
</script>
復(fù)制代碼
//子組件
<template><div><div><p>子組件值:{{show}}</p><button @click.stop=
"closeDiv" >修改</button></div></div>
</template><script>
export default {name:
'HelloWorld' ,methods: {
closeDiv () {this.
$emit (
'update:show' , !this.show); //觸發(fā) input 事件,并傳入新值}},props:[
'show' ]
}
</script>
復(fù)制代碼
關(guān)系型組件跨級(jí)傳遞(根組件、兒子組件、孫子組件) 一、使用 $attrs 和 $listeners
通過 $attrs 將值連續(xù)往下傳遞(和props傳遞類似),傳遞過程中可以只選擇當(dāng)前需要的值,組件中可以通過 inheritAttrs:false 保持當(dāng)前組件的屬性純凈度。通過 $listeners 可以在(…子組件)中 this. $emit(“upRocket”,11111)來觸發(fā)父組件中的事件,從而達(dá)到傳值給父組件的目的。
//父組件
<template><div><child-dom:foo=
"foo" :coo=
"coo" @upRocket=
"reciveRocket" ></child-dom></div>
</template>
<script>import childDom from
"./components/ChildDom.vue" ;
export default {
data () {
return {foo:
"Hello, world" ,coo:
"Hello,rui" }},methods:{reciveRocket(data){console.log(
"我是根組件,這是接受的孫子組件的數(shù)據(jù)" +data)}},components:{childDom},}
</script>
復(fù)制代碼
//子組件
<template><div><p>foo:{{foo}}</p><childDomChild v-bind=
"$attrs " v-on=
"$listeners " ></childDomChild></div>
</template>
<script>
import childDomChild from
'./childDomChild' ;
export default {name:
'child-dom' ,props:[
"foo" ],inheritAttrs:
false ,components:{childDomChild}
}
</script>
復(fù)制代碼
//孫子組件
<template><div><p>coo:{{coo}}</p> <button @click=
"startUpRocket" >發(fā)送數(shù)據(jù)到根組件</button> </div>
</template>
<script>
export default {name:
'child-dom' ,props:[
"coo" ],methods: {
startUpRocket () {this.
$emit (
"upRocket" );}}
}
</script>
復(fù)制代碼
二、$parent $children
其實(shí)通過 $ r e f 可以獲取到子組件中的一些掛載屬性和值, 父組件如果要獲取子組件的方法可以通過this.$refs.mychild.funName("…");這種方式,給子組件指定ref名稱。同理,通過 $parent $children可直接操作數(shù)據(jù)和方法。
this. $parent查找當(dāng)前組件的父組件。 this.$children查找當(dāng)前組件的直接子組件,可以獲取到全部直接子組件, 需要注意$children 并不保證順序,也不是響應(yīng)式的??梢酝ㄟ^this.$root.$children[0].$children[0].$children[0].msg連續(xù)查找 this.$root查找根組件,并可以配合$children遍歷全部組件
//父組件
<template><div>父組件的值:{{msg}}<child-dom></child-dom><button @click=
"change" >父組件點(diǎn)擊修改</button></div>
</template>
<script>import childDom from
"./components/ChildDom.vue" ;
export default {
data () {
return {msg: 0}},methods:{
change (){this.msg = this.
$children [0].childMsgthis.
$children [0].childMsg =
'子組件的值被父組件修改了' }},
mounted (){},components:{childDom},}
</script>
復(fù)制代碼
//子組件
<template><div>子組件的值:{{childMsg}}<button @click=
"decrease()" >子組件點(diǎn)擊修改</button></div>
</template>
<script>
export default {name:
'child-dom' ,
data () {
return {childMsg : 111};},methods: {
decrease () {this.childMsg = this.
$parent .msgthis.
$parent .msg =
"子組件修改了父組件的值" }}
}
</script>
復(fù)制代碼
非關(guān)系組件傳值 一、EventBus
適用于小型項(xiàng)目,可以達(dá)到任意組件相互通信的效果
//組件a
<template><div>{{fontCount}}<child-dom></child-dom></div>
</template>
<script>//import Vue from
'vue' //
export const EventBus = new Vue()import { EventBus } from
"./assets/bus.js" ;import childDom from
"./components/ChildDom.vue" ;
export default {
data () {
return {fontCount: 0}},methods:{},
mounted (){EventBus.
$on (
"decreased" , ({num}) => {this.fontCount -= num});},components:{childDom},}
</script>
復(fù)制代碼
//組件b
<template><div><button @click=
"decrease()" >-</button></div>
</template>
<script>
import { EventBus } from
"../assets/bus.js" ;
export default {name:
'child-dom' ,
data () {
return {num: 1,deg:180};},methods: {
decrease () {EventBus.
$emit (
"decreased" , {num:this.num});}}
}
</script>
復(fù)制代碼
二、vuex
請(qǐng)移步官方文檔查閱具體內(nèi)容
轉(zhuǎn)載于:https://juejin.im/post/5d254c0a6fb9a07f065594d9
總結(jié)
以上是生活随笔 為你收集整理的vue通信的N种方式 的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔 推薦給好友。