vue组件化通信之兄弟组件传值

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组件化通信之兄弟组件传值相关推荐

vue组件间通信之兄弟组件通信（vue3.0$EventBus）
vue组件间通信之兄弟组件通信(vue3.0$EventBus) vue组件中的数据传递最最常见的就是父子组件之间的传递.父传子通过props向下传递数据给子组件:子传父通过$emit发送事件,并携带 ...
vue组件化通信之子向父传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值 vue中子向父传递消息一般使用$emit,方法比较简单,直接看代码父组件 <template><div>< ...
vue组件化通信之父向子传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值父向子组件传值常用的方法主要有三种:props.$refs.$children 建议使用前两种使用props进行传值 parent.v ...
Vue 组件化通信 provide inject ,dispatch ,boardcast
入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
vue组件通信v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置父组件关键代码如下: 1 <tem ...
vue父子组件通信，兄弟组件通信
目录一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
html 组件化编辑器,谈谈前端组件化
一.什么是组件化什么是组件化?不同的人对组件化有着不同理解,我理解的组件化是一种编程思想,是一种拆分代码的方式.对前端开发来说,大到一个页面,小到一个html标签都可以说是一个组件.组件化的概念并不 ...
Android组件化实践2——经典组件化项目架构
Android组件化实践2--经典组件化项目架构京东的采用aab( Android App bundles)之后的架构图安居客项目架构演化参考:https://zhuanlan.zhihu.co ...
java组件化的优势_组件化编程开发如何判断组件的优劣性
随着互联网的不断发展,越来越多的程序员都在学习不同的编程开发方式,而组件化编程开发就是其中的一个常用开发方法.今天我们就一起来了解一下,组件化开发中关于组件的优劣性应该如何判断. 认识组件随着近些年 ...

vue组件化通信之兄弟组件传值

在vue中兄弟节点传值一般有两种方法：$parent和 $root，建议使用前者

使用$parent

使用$root

vue组件化通信之兄弟组件传值相关推荐

最新文章

热门文章

vue组件化通信之兄弟组件传值

在vue中兄弟节点传值一般有两种方法：$parent和 $root， 建议使用前者

使用$parent

使用$root

vue组件化通信之兄弟组件传值相关推荐

最新文章

热门文章

在vue中兄弟节点传值一般有两种方法：$parent和 $root，建议使用前者