Vue组件间通信 - 非常全面

最新推荐文章于 2023-04-12 22:55:22 发布
最新推荐文章于 2023-04-12 22:55:22 发布
阅读量182 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43487782/article/details/108209496
版权

父子组件通信

1. 使用props和$emit()

父组件 -> 子组件：父组件使用v-bind（冒号是简写）传参，子组件通过props接收
子组件 -> 父组件：子组件使用$emit()向外传递自定义事件，父组件通过v-on（@是简写）监听，可以使用$event接收参数，也可通过定义一个method接收参数

这应该是项目中最常用的方法，不多说了吧。

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		
		<!-- 可以使用$event接收参数 -->
		<the-child
		:message="message"
		@changeMessage="message = $event"
		></the-child>
		
		<!-- 也可以通过定义一个methods接收参数 -->
		<the-child
		:message="message"
		@changeMessage="handleMessage"
		></the-child>
	</div>
</template>

<script>
import TheChild from './TheChild.vue';

export default {
	components: {
		TheChild
	},
	data() {
		return {
			message: '您好，加菲猫'
		}
	},
	methods: {
		handleMessage(val) {
			this.message = val;
		}
	}
}
</script>

子组件代码如下：

<template>
	<div>
		<h1>这是子组件</h1>
		<div>{{ message }}</div>
		<button @click="handleClick">按钮</button>
	</div>
</template>

<script>
export default {
	props: ['message'],
	methods: {
		handleClick() {
			this.$emit('handleMessage', '您点击了按钮');
		}
	}
}
</script>

2. 使用回调函数

父组件 -> 子组件：父组件使用v-bind（冒号是简写）传参，子组件通过props接收
子组件 -> 父组件：父组件通过v-bind将修改参数的方法传入子组件，然后由子组件调用这个方法

个人感觉这个方法并没有实际用处，毕竟这里没有真的在传递参数，不过倒是提供了一个思路，可以通过子组件调用父组件中的方法。

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		
		<!-- 这里子组件接受了两个参数 -->
		<the-child
		:message="message"
		:changeMessageFn="handleMessage"
		></the-child>
	</div>
</template>

<script>
import TheChild from './TheChild.vue';

export default {
	components: {
		TheChild
	},
	data() {
		return {
			message: '您好，加菲猫'
		}
	},
	methods: {
		// 这个方法作为props传入子组件
		handleMessage() {
			this.message = '您点击了按钮';
		}
	}
}
</script>

子组件代码如下：

<template>
	<div>
		<h1>这是子组件</h1>
		<div>{{ message }}</div>
		<button @click="changeMessageFn">按钮</button>
	</div>
</template>

<script>
export default {
	props: ['message', 'changeMessageFn']
}
</script>

3. 使用$parent()和$children()

父组件 -> 子组件：父组件通过$children[0]，$children[1]去访问子组件实例
子组件 -> 父组件：子组件通过$parent去访问父组件实例

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		<button @cilck="handleChildNumber">按钮</button>
		<the-child></the-child>
	</div>
</template>

<script>
import TheChild from './TheChild.vue';

export default {
	components: {
		TheChild
	},
	data() {
		return {
			message: '您好，加菲猫'
		}
	},
	methods: {
		handleChildNumber() {
			// 因为一个父组件可能会有很多子组件，所以需要使用下标去访问
			this.$children[0].number = 50;
		}
	}
}
</script>

子组件代码如下：

<template>
	<div>
		<h1>这是子组件</h1>
		<div>{{ number }}</div>
		<div>{{ parentMessage }}</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			number: 10
		}
	},
	computed: {
		parentMessage() {
			return this.$parent.message;
		}
	}
}
</script>

4. 使用provide + inject

provide/inject 是 Vue 内置的无依赖的组件通信接口，允许一个祖先组件向其所有后代注入一个依赖，不论组件层次有多深，这和 React 中的 Context 特性相似。
provide/inject 主要为高阶插件、组件库提供用例，并不推荐直接应用于应用程序代码中。

父组件 -> 子组件：父组件使用provide提供一个值，子组件使用inject拿到父组件的值
子组件 -> 父组件：应该可以用同样的方法，还没验证过

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		<the-child></the-child>
	</div>
</template>

<script>
import TheChild from './TheChild.vue';

export default {
	components: {
		TheChild
	},
	provide: {
		message: '您好，加菲猫'
	}
}
</script>

子组件代码如下：

<template>
	<div>
		<h1>这是子组件</h1>
		<div>{{ message}}</div>
	</div>
</template>

<script>
export default {
	inject: ['message'],
}
</script>

5. 使用$attrs + $listeners

父组件 -> 子组件：父组件中使用v-bind进行传参，可以传递多个参数，子组件通过$attrs接收父组件传过来的参数
子组件 -> 父组件：子组件中使用$listeners获取到父组件中定义的事件监听器，也就是v-on，并执行绑定的事件处理函数

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		<div>姓名：{{ name }}</div>
		<div>年龄：{{ age }}</div>
		<the-child
		:name="name"
		:age="age"
		@changeName="changeName"
		></the-child>
	</div>
</template>

<script>
import TheChild from './TheChild.vue';

export default {
	components: {
		TheChild
	},
	data() {
	 return {
	 	name: '加菲猫',
	 	age: '18'
	 }
	},
	methods: {
		changeName() {
			this.name = '还是加菲猫'
		}
	}
}
</script>

子组件代码如下：

<template>
	<div>
		<h1>这是子组件</h1>
		<button @click="$listeners.changeName">按钮</button>
		<div>姓名：{{ $attrs.name }}</div>
		<div>年龄：{{ $attrs.age}}</div>
		<!-- $attrs包括了父组件传过来的name和age，还可以继续传给下一级组件 -->
		<grand-child v-bind="$attrs"></grand-child>
	</div>
</template>

<script>
import GrandChild from './GrandChild.vue'

export default {
	components: {
		GrandChild
	}
}
</script>

6. 使用ref属性

父组件 -> 子组件：父组件使用ref将子组件注册起来，使用this.$refs获取到组件实例，进而访问子组件的属性和方法

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		<the-child ref="childComp"></the-child>
		<button @click="changeName">按钮</button>
	</div>
</template>

<script>
import TheChild from './TheChild.vue';

export default {
	methods: {
		changeName() {
			console.log('点击前', this.$refs.childComp.age);
			this.$refs.childComp.changeAge();
			console.log('点击后', this.$refs.childComp.age);
		}
	}
}
</script>

子组件代码如下：

<template>
	<div>
		<h1>这是子组件</h1>
		<div>年龄：{{ age }}</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			age: 20
		}
	},
	methods: {
		changeAge() {
			this.age = 50;
		}
	}
}
</script>

兄弟组件通信

1. 使用props + $emit()

子组件传递的参数需要先经过父组件，才能传到另一个子组件。

父组件代码如下：

<template>
	<div>
		<h1>这是父组件</h1>
		<div>name: {{ name }}</div>
		<the-child1 :name="name" @handleChange="handleChange"></the-child1>
		<the-child2 :name="name"></the-child2>
	</div>
</template>

<script>
import TheChild1 from './TheChild1.vue';
import TheChild2 from './TheChild2.vue';

export default {
	data() {
		return {
			name: '加菲猫'
		}
	},
	methods: {
		// 接收子组件1传递的参数并给data赋值
		handleChange(name) {
			this.name = name;
		}
	}
}

子组件1代码如下：

<template>
	<div>
		<h1>这是子组件1，参数从这里传到子组件2</h1>
		<div>name: {{ name }}</div>
		<button @click="handleChange"></button>
	</div>
</template>

<script>
export default {
	props: ['name'],
	methods: {
		// 向外传递事件和参数
		handleChange() {
			this.$emit('handleChange', '还是加菲猫');
		}
	}
}
</script>

子组件2代码如下：

<template>
	<div>
		<h1>这是子组件2，这里接收子组件1传递的参数</h1>
		<div>name: {{ name }}</div>
	</div>
</template>

<script>
export default {
	props: ['name']
}
</script>

2. 使用EventBus = new Vue()

这个方法不需要经过父组件，所以就不需要使用v-bind和props。EventBus实际上就是Vue实例。在项目根目录下的main.js文件，创建一个EventBus并向外导出。

import Vue from 'vue';
import App from './App';

export const eventBus = new Vue();

new Vue({
	render: h => h(App),
}).$mount('#app');

在子组件1中引入eventBus并$emit()一个事件。因为eventBus是vue实例，所以上面存在$emit()方法。

子组件1代码如下：

<template>
	<div>
		<h1>这是子组件1，参数从这里传到子组件2</h1>
		<div>name: {{ myName }}</div>
		<button @click="handleChange"></button>
	</div>
</template>

<script>
import { eventBus } from '../main'; // 需要先引入eventBus

export default {
	data() {
		return {
			myName = '加菲猫'
		}
	}
	methods: {
		// 向外传递事件和参数
		handleChange() {
			this.myName = '还是加肥猫';
			eventBus.$emit('handleChange', '还是加菲猫');
		}
	}
}
</script>

子组件2也引入eventBus并监听自定义事件，把监听到的值传给当前组件的data

子组件2代码如下：

<template>
	<div>
		<h1>这是子组件2，这里接收子组件1传递的参数</h1>
		<div>name: {{ myName }}</div>
	</div>
</template>

<script>
import { eventBus } from '../main'; // 需要先引入eventBus

export default {
	data() {
		return {
			myName = '加肥猫'
		}
	},
	created() {
		eventBus.$on('handleChange', (name) => {
			this.myName = name;
		})
	}
}
</script>

3. 使用Vuex = new Vuex.Store()

创建一个文件夹store，里面定义一个index.js，在里面创建一个Vuex.Store并将这个实例导出。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
	state: {
		name: '加肥猫'
	},
	mutations: {
		changeName(state) {
			state.name = '还是加肥猫';
		}
	}
})

export default store;

在main.js中导入这个实例，并注入到根Vue实例中。

import Vue from 'vue';
import App from './App';
import store from './store';

new Vue({
	render: h => h(App),
	store
}).$mount('#app');

子组件中可以通过$store.state.name进行访问

子组件1代码如下

<template>
	<div>
		<h1>这是子组件1，参数从这里传到子组件2</h1>
		<div>name: {{ $store.state.name }}</div>
		<button @click="handleChange"></button>
	</div>
</template>

<script>
export default {
	methods: {
		// 执行名为changeName的mutation
		handleChange() {
			this.$store.commit('changeName');
		}
	}
}
</script>

子组件2代码如下

<template>
	<div>
		<h1>这是子组件2，这里接收子组件1传递的参数</h1>
		<div>name: {{ $store.state.name }}</div>
	</div>
</template>

<script>
export default {
	
}
</script>
天猫精灵998
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue页面中嵌入html页面跨域,vue内嵌iframe并跨域通信
weixin_32142107的博客
06-03 2028
Vue组件中如何引入iframe？export default {data () {return {src: '你的src'}}}如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了vue如何获取iframe对象以及iframe内的window对象？在vue中，dom操作比不上jquery的$(‘#id’)来的方便，但是也有办法，就是通过refexport de...
Vue iframe之间通讯
前端李小白的博客
08-10 3584
1、主应用通过在iframe的onload事件中，使用postMessage向子应用进行数据交互 2、子应用在mounted阶段通过监听onmessage事件进行接收事件 主应用 <template> <div v-tip="loading" :style="'height:' + (isQiankun ? qiankunHeight : height)"> <iframe ref="iframe" :src="src" fram
webSocket接收字节消息
qq_41355005的博客
09-12 2662
视频 前段时间公司有一个需求要通过相机记录车辆进出场时的视频，但是相机是通过websocket实时传的是一张一张的mjpeg的图片，所以就需要用图片转视频。 WebSocket接收二进制数据需要继承BinaryWebSocketHandler类 重写handleBinaryMessage()方法 /** * 接收到信息 */ @Override protected void handleBinaryMessage(WebSocketSession session, B
Vue2组件间通信
星环
12-21 490
Vue2.x 组件通信共有12种 props ：父级向子级传递数据，单向； $emit / v-on ：子级通过触发事件向父级传递数据 ，单向； .sync ： 父子之间通信 双向，相当于组合了props和$emit/v-on； v-model ： 父子之间通信 双向，可以理解为一个特殊化的 .sync ； ref ：父级通过ref获取子级的实例，从而可以获取子级数据或者调用方法； $children\ $parent：子级通过 $parent 访问父级实例从而获取属性和方法，兄弟组件也可以通过
Vue组件间多种通信方式（超详细）
qq_65089414的博客
04-12 1730
除了通过props进行父子组件之间的通信，Vue还提供了一种更加灵活的组件间通信方式，即自定义事件。通过自定义事件，可以让子组件向父组件发送消息，也可以让任意两个组件之间进行通信。自定义事件的实现依赖于Vue实例中的事件系统，即$emit和$on方法。在子组件中，使用$emit方法触发一个自定义事件，并传递需要传递的数据。在父组件中，使用$on方法监听这个自定义事件，并在回调函数中获取传递的数据。代码示例：
vue-element-admin-master 免费 vue学者
最新发布
01-22
6. **Vue.js组件化开发**：学习如何定义Vue组件，组件的props、生命周期钩子函数、计算属性、侦听器等，以及组件之间的通信方式，如自定义事件和props传递。 7. **API接口调用与数据展示**：理解如何通过axios获取...
vue-mall-master.zip
01-10
总之，“vue-mall-master”是一个全面的Vue.js实践项目，涵盖了前端开发的多个方面，是学习和理解Vue生态、实践MVC模式以及提高前端技能的好例子。通过研究和运行这个项目，开发者不仅可以提升Vue.js的应用能力，还...
vue-spring-login-summed
05-10
Vue.js作为一个轻量级的前端JavaScript框架，提供了高效的数据绑定和组件化功能，而Spring则是一个成熟的后端Java框架，支持MVC模式，提供了全面的企业级服务。"Vue Spring登录总和"项目融合了这两个框架，旨在实现...
少女风vue组件库的制作全过程
10-17
少女风Vue组件库的制作全过程涉及到了Vue.js的多个核心概念...总的来说，少女风Vue组件库的制作是一个全面的Vue开发实践过程，涵盖了从组件设计、开发、测试到发布的各个环节，有助于提升开发者在前端领域的专业技能。
Vue.js-2.0-参考手册.CHM
10-19
3. **状态管理**：Vue 2.0引入了Vuex作为官方推荐的状态管理工具，用于集中管理组件间的共享状态。学习Vuex的基本原理、状态、动作、mutations和getters等。 4. **响应式系统**：Vue的响应式系统是如何实现数据变化...
vue内嵌iframe跨域通信
boundle_ss的博客
12-01 6183
​ 1、Vue组件中如何引入iframe？ 2、vue如何获取iframe对象以及iframe内的window对象？ 3、vue如何向iframe内传送信息？ 4、iframe内如何向外部vue发送信息？ ​
在vue中使用Element的message组件
djz20357的博客
08-13 918
在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success" }) 在js文件中使用 import ElementUI from 'element-ui'; ElementUI.Message({ message: '提示信息', type: 'warnin...
基于vue封装一个消息提示组件
今天学习了吗
09-04 1040
目的：在接口请求报错的时候给用户进行提示 组件功能分析： 固定顶部显示，有三种类型：成功，错误，警告。 显示消息提示时需要动画从上滑入且淡出。 组件使用的方式不够便利，封装成工具函数方式。 大致实现步骤： 先把布局，和三种情况的显示，完成。 定义组件：src/components/library/message.vue <template> <transition name='down'> <div class="xtx-mes
vue handler ()的参数是什么_你应该知道的Vue高级特性
weixin_36128925的博客
02-02 1万+
本文使用的Vue版本：2.6.10Vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。一、watch进阶从我们刚开始学习Vue的时候，对于侦听属性，都是简单地如下面一般使用：watch:{ a(){ //doSomething } } 实际上，Vue对watch提供了很多进阶用法。handler函数以对象和handler函数的方式来定义一个监听属性，h...
vue.js的h5页面与android(WebViewJavascriptBridge) / ios(window.webkit.messageHandlers)交互详细
热门推荐
lyyo_cd的博客
11-20 4万+
一、首先是h5页面与android交互：这里，我交互的android用的是WebViewJavascriptBridge： ####android调用h5方法并传递消息： 注意：在vue与android交互的时候，android的方法里this指向无效，需要赋值that； ####   h5传递消息给android： 二、h5页面与IOS交互，这里IOS用的是window.webk...
Bundle，Message，Handle用法解析
liudongdong_jlu
02-18 1640
Bundle类介绍：         Bundle是一个载体，可以存放基本数据类型、对象等内容，相当于一辆汽车，可以装载很多东西，然后运到需要的地方，Bundle mBundle=new Bundle(); //创建Bundle实例 mBundle.putString("sname","hanmei"); mBundle.putInt("snumber",100); mBundle.putBoo...
后端返回二进制文件流，前端如何下载文件
weixin_43487782的博客
11-10 2万+
项目中有一个download接口，这个接口直接返回二进制文件流。之前如果下载文件，一般后端传一个加密串过来，然后前端进行解密，拼接成URL再去下载。现在等于直接把文件发给前端，这种情况下怎么下载文件？问了下同事，他们也没遇到过这种情况，好在网上有不少资料可以参考。下面先给出解决问题的思路，最后再给链接。 二进制流接收 首先需要接收后端传过来的二进制流。默认情况下axios不会处理二进制数据，即请求可以正常被浏览器接收，但是axios不会去处理。需要在请求的时候设置responseType: 'blob'才可
Vue动态获取浏览器窗口宽度
weixin_43487782的博客
09-28 1万+
项目中有一个需求，搜索框需要根据页面宽度动态变化，例如宽度小于等于1280时搜索框的宽度为280px，大于1920时宽度为360px，在1280和1920之间则根据比例缩放。 由于页面是flex布局，并且靠两端对齐的，所以min-width和max-width基本上是排不上用场了。当时首先想到的是媒体查询，但是媒体查询不能实现按比例缩放的效果。后来想到通过JS获取页面宽度，然后根据宽度来判断搜索框应该取多少宽度。 那么这个逻辑应该放在什么位置呢？先在计算属性里面试了下，代码如下： <template&
Vue3.0 + Vite 初体验（一）项目配置
weixin_43487782的博客
01-17 9062
Vue3.0 已经发布一段时间了，特别是还发布了一个打包构建工具 Vite，据说是可以干掉 webpack 的，趁这段时间有空，本人也体验了一下。 想使用 Vue3.0 不一定要用 Vite，vue-cli 也可以构建。 $ npm install -g @vue/cli 确保已经升级到最新的版本： $ npm update -g @vue/cli $ vue --version 然后创建项目： $ vue create vue3-demo 选择第二个 Vue 3 Preview，或者自定义安装 使
VUE经典面试题目包含答案
05-05
5. VUE 组件之间如何通信：讨论了组件间通信的几种方式。 6. 描述组件渲染和更新的过程：详细描述了组件的初次渲染过程和更新过程。 7. 双向数据绑定 v-model 的实现原理：解释了v-model双向绑定的实现原理。 8. 对 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值