vue 非父子组件间传值通讯

本文介绍了一种Vue组件间通信的方法,通过创建一个全局的Vue实例作为中转站,实现非父子关系组件间的事件触发与监听,适用于复杂应用中组件间的数据传递。

当有非父子关系的组件进行通信是我们可以通过一个vue实例来作为中转站

步骤如下:

1.新建bus.js作为中转站

import Vue from 'Vue';
export default new Vue;

2.在需要触发事件的组件a中加入:

import bus from './bus.js'
bus.$emit('change','HelloWorld')

3.在组件b监听事件触发:

import bus from './bus.js'
bus.$on("change", val => { // 一般加载组件create或mounted
      console.log(val);
    });

 

### Vue.js 父子组件方法 #### 使用 Props 和 $emit 进行单向数据流通信 在Vue中,父子组件的数据递遵循单向下行流动的原则。父组件通过`props`向下递数据至子组件,在此过程中可以递任何类型的 JavaScript 数据结构,包括但不限于字符串、数、布尔、数组和对象[^2]。 对于子组件来说,如果需要与父组件沟通,则通常会触发事件来通知父组件某些状态的变化或请求操作。这可通过`$emit()`函数实现,该函数允许子组件发射自定义事件并携带参数返回给监听这些事件的父级组件[^3]。 下面给出具体的代码示例: #### 示例:父组件向子组件发送消息并通过按钮点击反馈回数 ##### 子组件 (ChildComponent.vue) ```html <template> <div class=""> <h2>我是子组件</h2> <!-- 显示来自父组件的消息 --> <p>{{ messageFromParent }}</p> <button @click="sendMessageToParent">向父组件</button> </div> </template> <script> export default { props: ['messageFromParent'], // 接收父组件来的内容 methods: { sendMessageToParent() { // 发射一个名为 'child-msg' 的事件并将当前计数器作为载荷发出 this.$emit('child-msg', "这是从子组件发来的问候"); } } } </script> ``` ##### 父组件 (ParentComponent.vue) ```html <template> <div id="parent"> <h1>这里是父组件</h1> <!-- 向子组件递信息,并绑定处理程序等待接收回应 --> <child-component :message-from-parent="'你好啊,子组件!'" v-on:child-msg="handleMessage" ></child-component> <hr /> <strong>收到的信息:</strong><span>{{ receivedMsg }}</span> </div> </template> <script> import ChildComponent from './components/ChildComponent'; export default { name: 'Parent', components: { ChildComponent, }, data() { return { receivedMsg: '' }; }, methods: { handleMessage(msg) { console.log(`接收到子组件的消息: ${msg}`); // 更新本地变量存储子组件过来的新消息 this.receivedMsg = msg; } } }; </script> ``` 在这个例子中,当用户点击子组件内的按钮时,将会调用`sendMessageToParent`方法,进而触发`$emit('child-msg')`事件;与此同时,父组件已经绑定了相应的处理器`v-on:child-msg="handleMessage"`,因此能够捕获到这条消息并更新自身的视图显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值