1.props和$emit
父組件向子組件傳遞數據是通過prop傳遞的，子組件傳遞數據給父組件是通過$emit觸發事件來做到的
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", })
復制代碼2.$attrs和$listeners
第一種方式處理父子組件之間的數據傳輸有一個問題：如果父組件A下面有子組件B，組件B下面有組件C,這時如果組件A想傳遞數據給組件C怎么辦呢？ 如果采用第一種方法，我們必須讓組件A通過prop傳遞消息給組件B，組件B在通過prop傳遞消息給組件C；要是組件A和組件C之間有更多的組件，那采用這種方式就很復雜了。Vue 2.4開始提供了$attrs和$listeners來解決這個問題，能夠讓組件A之間傳遞消息給組件C
<script> Vue.component(
"childs",{
data() {
return{ mymessages:
"我可能要接受到來自我爺爺的消息" } }, 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>
復制代碼此方法是通過想目標的子組件 綁定 v-bind="$attrs"? 與 v-listeners; 而子組件過的數據為$.attrs的對象,數據為 $attrs.messageChild,實現數據的接受,而子組件傳遞給父組件則是通過$meit傳遞事件來向父組件傳遞相應的數據.
3. 中央事件總線
上面兩種方式處理的都是父子組件之間的數據傳遞，而如果兩個組件不是父子關系呢？這種情況下可以使用中央事件總線的方式。新建一個Vue事件bus對象，然后通過bus.$emit觸發事件，bus.$on監聽觸發的事件。
<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>
復制代碼首先我們或創建一個 bus實例, 父組件在mthods方法中,通過bus.$emit()中傳遞事事件攜帶參數,然后兄弟組件mounted鉤子函數中 通過bus.$on()接受事件和方法.
4. provide和inject
父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限于只能從當前父組件的prop屬性來獲取數據，只要在父組件的生命周期內，子組件都可以調用。
<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>
復制代碼5. v-model
父組件通過v-model傳遞值給子組件時，會自動傳遞一個value的prop屬性，在子組件中通過this.$emit(‘input',val)自動修改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>
復制代碼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>
復制代碼父組件通過methods事件 通過事件 觸發 this.$children[1].message="hello"來向子組件中傳遞值,1為父組件中第一個子組件,
子組件通過this.$parent.message=this.mymessage來修改? 父組件中message 的值.
7. vuex處理組件之間的數據交互
如果業務邏輯復雜，很多組件之間需要同時處理一些公共的數據，這個時候才有上面這一些方法可能不利于項目的維護，vuex的做法就是將這一些公共的數據抽離出來，然后其他組件就可以對這個公共數據進行讀寫操作，這樣達到了解耦的目的。
總結
以上是生活随笔為你收集整理的Vue组件通信的7个方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
