首页 > 其他分享> 文章详细

VUE学习-组件通信

2022-08-12 19:33:18 阅读：150 来源： 互联网

标签：VUE 通信 export 组件 data children 传值

vue组件通信

页面传值：$route/${prop}
组件传值：
- 父组件传值给子组件：参数传值
- 子组件传值给父组件：给父组件传过来函数传参数；通过插槽的v-slot，绑定参数

组件通信一般分为以下几种情况：

父子组件通信
兄弟组件通信
跨多层级组件通信
任意组件

父子通信

父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件

父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props，而是必须通过发送事件的方式告知父组件修改数据。

还可以通过访问 $parent 或者 $children 对象来访问组件实例中的方法和数据。

父传值给子组件

props传值

父组件

<template>
	<div>
		<children :info ="messgae"></children>
	</div>
</template>
<script>
import children from './children.vue'
export default {
	data(){
		return{
			messgae:'我是父组件'
		}
	},
	components:{
		children
	}
}
</script>
<style></style>

子组件

<template>
	<div>{{info}}</div>
</template>
<script>
export default {
	props:['info']
}
</script>
<style></style>

子组件给向父组件传递事件

$emit

父组件

<template>
	<div>
	{{ newData }}
		<children @event1="change($event)"></children>
	</div>
</template>
<script>
import children from './children'
export default {
	data() {
		return {
			newData: '这是父组件的数据'
		}
	},
	methods: {
		change(data) {
			this.newData = data;
		}
	},
	components: {
		children
	}
}
</script>
<style></style>

子组件

<template>
	<div>
		<h1>我是子组件</h1>
		<button @click="toParent">向父组件传值</button>
	</div>
</template>
<script>
export default {
	data() {
		return {
			data1: '子组件的数据'
		}
	},
	created(){
		console.log(222)
	},
	methods: {
		toParent:function() {
			this.$emit('event1', this.data1)
		}
	}
}
</script>
<style scoped></style>

兄弟组件通信

这种情况可以通过查找父组件中的子组件实现，也就是 this.$parent.$children，在 $children 中可以通过组件 name 查询到需要的组件实例，然后进行通信。

跨多层次组件通信

对于这种情况可以使用 Vue 2.2 新增的 API provide / inject，虽然文档中不推荐直接使用在业务中，但是如果用得好的话还是很有用的。
假设有父组件 A，然后有一个跨多层级的子组件 B

// 父组件 A
export default {
	provide: {data: 1}
}
// 子组件 B
export default {
	inject: ['data'],
	mounted() {
		// 无论跨几层都能获得父组件的 data 属性
		console.log(this.data) // => 1
	}
}

任意组件

这种方式可以通过 Vuex 或者 Event Bus 解决，另外如果你不怕麻烦的话，可以使用这种方式解决上述所有的通信情况

标签：VUE,通信,export,组件,data,children,传值
来源： https://www.cnblogs.com/-LemonWater-/p/16581094.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9