感覺Vue中父子傳參的方式，實在是太多了，于是做一個小總結，只是總結我所知道的。 歡迎吐槽

1.父傳子

基本就用一個方式，props

父親通過在 標簽 中寫入需要傳入的數據。

<!--father.vue--> <template><div>我是爸爸，下面是兒子<son title='兒子' :selected='selected'></son></div> </template> 復制代碼

兒子在 實例中的 props 選項中獲取

//son.vue export default {name:'son',props:{selected:{type:Boolean},title:{type:String}} } 復制代碼

2.子傳父

# update:my-prop-name 模式

Vue 是單項數據流，所以不允許 兒子 直接修改父親的數據，也不允許兒子直接修改自己的props。

假設一個情況，點擊兒子，兒子需要改變 selected 的狀態。

兒子方面

觸發點擊事件后， 讓兒子觸發一個 update 事件，把新的 selected 傳出去

<!--son.vue--> <template><div class="son" @click="onClick">title:{{title}} selected:{{selected}}</div> </template> <script> export default {name: "son",props: {selected: {type: Boolean},title: {type: String}},methods: {onClick() {this.$emit("update:selected", !this.selected); //關鍵點}} }; </script><style> .son {border: 1px solid red; } </style> 復制代碼

父親方面

在標簽中監聽 update事件，并將傳過來的 $event付給 selected，這樣就完成了一次傳參。

<!--father.vue--> <template><div>我是爸爸，下面是兒子<son title='兒子' :selected='selected' @update:selected='selected=$event'></son> <!--關鍵點--></div> </template><script> import Son from "./son"; export default {name: "father",components: {Son},data() {return {selected: true};} }; </script> 復制代碼

簡單方式

.sync 修飾符

<!--father.vue--> <template><div>我是爸爸，下面是兒子<son title='兒子' :selected.sync='selected'></son> <!--關鍵點--></div> </template> 復制代碼

# $parents API

兒子方面

從 this.$parent中可以獲取到 父組件 的 data 數據 ，直接進行修改，是不是很刺激。

methods: {onClick() {this.$parent.selected = !this.$parent.selected;}} 復制代碼

雖然刺激，但是，我建議調用父組件的函數，來切換狀態。

父親方面

//father.vue export default {name: "father",components: {Son},data() {return {selected: true};},methods: {changeSelected() {this.selected = !this.selected;}} }; 復制代碼

兒子方面

//son.vue methods: {onClick() {this.$parent.changeSelected();}} 復制代碼

# EventBus

如果只是一個父親，一個兒子上面的方法非常的簡單實用，但是如果是祖孫三代傳參呢？上面的方法就很麻煩了。

具體怎么麻煩，可以看一下我的這篇文章，用原始的方法造 tabs輪子:zhuanlan.zhihu.com/p/39601572

廢話不多說，開始用 EventBus做一個簡單的 tabs組件。

#app.vue

<template><div id="app"><tab selected='news'><tab-item name='news'>新聞</tab-item><tab-item name='car'>汽車</tab-item><tab-item name=‘code’>代碼</tab-item><tab-pane name='news'>新聞列表</tab-pane><tab-pane name='car'>汽車列表</tab-pane><tab-pane name=‘code’>代碼列表</tab-pane></tab></div> </template><script> import Tab from "./components/tabs.vue"; import TabItem from "./components/tab-item"; import TabPane from "./components/tab-pane";export default {name: "app",components: {Tab,TabItem,TabPane} }; </script> 復制代碼

# tabs.vue

<template><div><slot></slot></div> </template><script> import TabItem from "./tab-item.vue"; import Vue from "vue"; //引入VUE export default {name: "tab",props: {selected: {type: [Number, String]}},data() {return {eventBus: new Vue() // 創建 eventBus};},provide() {return {eventBus: this.eventBus // 提供 eventBus};},mounted() {this.eventBus.$emit("update:selected", this.selected); //發布消息，告訴大家，現在的selected是啥} }; </script><style> </style> 復制代碼

# tabs-item.vue

<template><div @click="onClick" :class="{active}"><slot/></div> </template><script> export default {name: "tab-item",props: {name: {type: [String, Number]}},inject: ["eventBus"], //注入 eventBusdata() {return {active: false};},created() {this.eventBus.$on("update:selected", newSelected => {this.active = this.name === newSelected;}); //接收消息，如果newselected 和我的 name 相同，那么我就被選中了},methods: {onClick() {this.eventBus.$emit("update:selected", this.name);//發布消息，如果點擊了我，我就告訴大家，我被選中了}} }; </script><style> .active {color: red; } </style> 復制代碼

# tab-pane.vue

<template><div v-if="active" class="pane"><slot/></div> </template><script> export default {name: "tab-pane",props: {name: {type: [String, Number]}},data() {return {active: false};},inject: ["eventBus"],//注入 eventBuscreated() {this.eventBus.$on("update:selected", newSelected => {this.active = this.name === newSelected;});//接收消息，如果newselected 和我的 name 相同，那么我就被選中了} }; </script><style> .pane {color: red; } </style> 復制代碼

# 靈活運用 provide inject

//father.vue export default {name:'father',data(){return {someThing:'father'}},provide(){return {father:this}} } 復制代碼//son.vue export default {name:'son',inject:['father'],methods:{onClick(){this.father.someThing = 'son'}} } 復制代碼

轉載于:https://juejin.im/post/5b95c9ed6fb9a05cde1d35bf

總結

以上是生活随笔為你收集整理的Vue父子组件通信小总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。