vue的兄弟组件传值

最新推荐文章于 2024-03-06 13:51:03 发布

#做一个清醒的人

最新推荐文章于 2024-03-06 13:51:03 发布

阅读量496

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/rock_23/article/details/111175766

版权

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了两种在Vue和React中实现兄弟组件间通信的方法。首先，通过状态提升，让父组件接收子组件A的值并传递给子组件B，利用父子组件的通信实现数据流动。其次，使用一个全局的事件总线（如Vue实例）在组件之间订阅和发布事件，使得子组件A和B可以直接进行数据交互。这两种方式在实际开发中都有其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过状态提升（react叫状态提升，vue可能还有别的叫法）的方法去实现兄弟组件传值

父组件：
    <template>
    	<div>
    		<ChildrentsA @close="clickhandler"/>
    		<ChildrentsB :data="childrenData"/>
    	</div>
    </template>
    
    <script>
    	import ChildrentsA from "@/components/Children/ChildrentsA.vue";
    	import ChildrentsB from "@/components/Children/ChildrentsB.vue";
    	export default {
    		name: "BotherProps",
    		data(){
    			return {
    				childrenData: ""
    			}
    		},
    		props:[],
    		methods:{
    			clickhandler(val){
    				console.log(val);
    				this.childrenData = val;
    			}
    		},
    		components:{
    			ChildrentsA,
    			ChildrentsB
    		}
    	}
    </script>
childrentsA组件（第一个子组件）：
    <template>
    	<div>
    		<el-input v-model="input" placeholder="请输入内容" @change="emitHandler"></el-input>
    		<el-button type="primary" @click="emitHandler">click Me</el-button>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: "ChildrentsA",
    		data(){
    			return {
    				input: '',
    				count: 0,
    			}
    		},
    		methods: {
    			emitHandler(){
    				this.$emit("close", this.input);
    			}
    		}
    	}
    </script>
componentsB组件（第二个子组件）：
    <template>
    	<div>
    		{{text}}
    		<el-button type="primary" @click="emitHandler">click Me</el-button>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: "ChildrentsB",
    		props:["data"],
    		data(){
    			return {
    				text: "我是childrentsB组件"
    			}
    		},
    		created(){
    		},
    		methods: {
    			emitHandler(){
    				console.log(this.data);
    			}
    		}
    	}
    </script>

注：状态提升那，其实就是把childrentsA组件中传过来的值先在父组件中接收，然后赋值给一个data中一个属性名，通过父传子的方式再传给childrentsB子组件。
2. 通过创建一个共同的js文件来实现兄弟传值

共同的js文件：
    import Vue from 'vue'
    export const transfer = new Vue();
    
ChildrentsA（第一个子组件）：
    <template>
    	<div>
    		<el-input v-model="input" placeholder="请输入内容" @change="emitHandler"></el-input>
    		<el-button type="primary" @click="emitHandler">click Me</el-button>
    	</div>
    </template>
    
    <script>
    	import {transfer} from "@/assets/js/transfer.js"
    	export default {
    		name: "ChildrentsA",
    		data(){
    			return {
    				input: '',
    				count: 0,
    			}
    		},
    		methods: {
    			emitHandler(){
    				transfer.$emit("close", this.input);
    			}
    		}
    	}
    </script>
    
ChildrentsB（第二个子组件）：
    <template>
    	<div>
    		<el-button type="primary" @click="emitHandler">componentB</el-button>
    	</div>
    </template>
    
    <script>
    	import {transfer} from "@/assets/js/transfer.js";
    	export default {
    		name: "ChildrentsB",
    		props:["data"],
    		data(){
    			return {
    			}
    		},
    		mounted(){
    			transfer.$on("close", (msg) => {
    				console.log(msg);
    			})
    		},
    		methods: {
    			emitHandler(){
    				// console.log(this.data);
    			}
    		}
    	}
    </script>