vue組件化通信之父向子傳值
vue組件化通信之子向父傳值

在vue中兄弟節點傳值一般有兩種方法：$parent和 $root， 建議使用前者

使用$parent

**parent.vue** <template><div><childTest></childTest><anotherChildTest></anotherChildTest></div> </template><script>import childTest from './childTest.vue'import anotherChildTest from './anotherChildTest.vue'export default {components: {childTest,anotherChildTest},data() {return {msg: ''}},methods:{}} </script>

childTest.vue

<template><div></div> </template><script>export default {mounted() {this.$parent.msg = 'my vue props'}} </script>

anotherChildTest.vue

<template><div>{{myMsg}}</div> </template><script>export default {data() {return {myMsg: ''}},mounted() {this.myMsg = this.$parent.msg}} </script>

使用$root

main.js

import Vue from "vue"; import App from "./App.vue";Vue.config.productionTip = false;new Vue({data() {return {mainMsg: ''}},render: h => h(App) }).$mount("#app");

parent.vue

<template><div><childTest></childTest><anotherChildTest></anotherChildTest></div> </template><script>import childTest from './childTest.vue'import anotherChildTest from './anotherChildTest.vue'export default {components: {childTest,anotherChildTest},} </script>

childTest.vue

<template><div></div> </template><script>export default {mounted() {this.$root.mainMsg = 'my vue root'}} </script>

anotherChildTest.vue

<template><div>{{myMsg}}</div> </template><script>export default {data() {return {myMsg: ''}},mounted() {this.myMsg = this.$root.mainMsg}} </script>

總結

以上是生活随笔為你收集整理的vue组件化通信之兄弟组件传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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