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>