子向父方式1：通過props,如例子中子組件test1.vue向父組件App.vue傳值

　　App.vue代碼

<template><div id="app"><test1 :parfn="parfn"></test1></div> </template><script> import test1 from '@/components/test1.vue' export default {name: 'App',data () {return {msg: 'parent'}},components: {test1},methods: {parfn: function (a) {alert(a)}} } </script>

　　test1.vue代碼

<template><div>i am test1</div> </template><script> export default {data () {return {msg: 'test1'}},props: {parfn: {type: Function}},created: function () {this.parfn(this.msg)} } </script>

效果圖

?

子向父方式2：通過$parent

　　App.vue代碼：　　

<template><div id="app"><test1></test1></div> </template><script> import test1 from '@/components/test1.vue' export default {name: 'App',data () {return {msg: 'parent'}},components: {test1},methods: {parfn: function (a) {alert(a)}} } </script>

　　test1.vue代碼：　

<template><div>i am test1</div> </template><script> export default {data () {return {msg: 'test1'}},created: function () {this.$parent.parfn(this.msg)} } </script>

效果圖：

子向父方式3:通過emit

　　App.vue代碼

<template><div id="app"><test1 @myfn="parfn"></test1></div> </template><script> import test1 from '@/components/test1.vue' export default {name: 'App',data () {return {msg: 'parent'}},components: {test1},methods: {parfn: function (a) {alert(a)}} } </script>

　　test1.vue代碼：　

<template><div>i am test1</div> </template><script> export default {data () {return {msg: 'test1'}},mounted: function () {this.$emit('myfn', this.msg)} } </script>

效果圖：

?

父向子傳值方式1：通過props

　　App.vue代碼：　

<template><div id="app"><test1 :msg="msg"></test1></div> </template><script> import test1 from '@/components/test1.vue' export default {name: 'App',data () {return {msg: 'parent'}},components: {test1} } </script>

　　test1.vue代碼：

<template><div>i am test1</div> </template><script> export default {props: ['msg'],created: function () {alert(this.msg)} } </script>

　　效果圖：

　　

父向子方式2：通過$children

　　App.vue代碼：　　

<template><div id="app"><test1></test1></div> </template><script> import test1 from '@/components/test1.vue' export default {name: 'App',data () {return {msg: 'parent'}},mounted: function () {this.$children[0].childfn(this.msg)},components: {test1} }

　　test1.vue代碼　　

<template><div>i am test1</div> </template><script> export default {methods: {childfn: function (a) {alert(a)}} } </script>

　　效果圖：

　　

父向子方式3：通過ref

　　App.vue代碼：　

<template><div id="app"><test1 ref="mychild"></test1></div> </template><script> import test1 from '@/components/test1.vue' export default {name: 'App',data () {return {msg: 'parent'}},mounted: function () {this.$refs.mychild.childfn(this.msg)},components: {test1} } </script>

　　test1.vue代碼：　

<template><div>i am test1</div> </template><script> export default {methods: {childfn: function (a) {alert(a)}} } </script>

　　效果圖：

　　

?兄弟間傳值方式1：通過事件車,例如App.vue組件中兩個兄弟組件test1.vue傳值給test2.vue

　　步驟1：在外部如assets下創建bus.js　

// bus.js import Vue from 'vue' export default new Vue()

　　步驟2：組件中引入相互傳值的兄弟組件,如App.vue中test1組件傳值給test2組件　

<!--App.vue--> <template><div id="app"><test1></test1><test2></test2></div> </template><script> import test1 from '@/components/test1.vue' import test2 from '@/components/test2.vue' export default {name: 'App',components: {test1, test2} } </script>

　　步驟3：test1組件中引入bus，通過$emit發送事件　

<template><div>test1<button @click="send">點擊發送test1數據給test2</button></div> </template><script> import bus from '@/assets/bus' export default {data () {return {msg: 'test1數據111'}},methods: {send: function () {bus.$emit('myfn', this.msg)}} } </script>

　　步驟4：test2組件中引入bus，通過$on接收事件

<template><div>i am test2，接收過來的數據為:{{msg}}</div> </template><script> import bus from '@/assets/bus' export default {data () {return {msg: ''}},created: function () {bus.$on('myfn', msg => {this.msg = msg})} } </script>

　　效果圖：

兄弟間傳值方式2：子組件傳數據給父，父再傳給另一個兄弟組件，例如App.vue組件中兩個兄弟組件test1.vue傳值給test2.vue

　　步驟1：test1組件中通過$emit傳遞數據給父組件App.vue　

<template><div>test1<button @click="send">點擊發送test1數據給test2</button></div> </template><script> export default {data () {return {msg: 'test1數據111'}},methods: {send: function () {this.$emit('myfn', this.msg)}} } </script>

　　步驟2：父組件App.vue中，通過v-bind綁定個屬性傳遞給另一個子組件test2.vue

<!--App.vue--> <template><div id="app"><test1 @myfn="getmsg"></test1><test2 :msg="msg"></test2></div> </template><script> import test1 from '@/components/test1.vue' import test2 from '@/components/test2.vue' export default {name: 'App',data () {return {msg: ''}},methods: {getmsg: function (msg) {this.msg = msg}},components: {test1, test2} } </script>

　　步驟3：test2.vue組件通過props接收父組件傳遞過來的參數　

<template><div>i am test2，接收過來的數據為:{{msg}}</div> </template><script> export default {props: ['msg'] } </script>

　　效果圖：

　　

?

轉載于:https://www.cnblogs.com/hesj/p/10568869.html

總結

以上是生活随笔為你收集整理的总结vue中父向子，子向父以及兄弟之间通信的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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