vue的组件通讯

最新推荐文章于 2024-07-26 09:29:19 发布

阿笙@叶

最新推荐文章于 2024-07-26 09:29:19 发布

阅读量81

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/hzh2031015/article/details/117059980

版权

本文详细介绍了Vue中组件通信的三种方式：父传子（通过props传递数据），子传父（使用自定义事件触发方法）以及兄弟组件之间的通信（借助eventBus实现）。通过具体代码示例展示了每种通信方式的实现细节，强调了Vue2.0的单向数据流原则。

摘要由CSDN通过智能技术生成

vue的组件通讯分三种（子传父，父传子，兄弟组件）

1，父传子

在父组件中给子组件标签上绑定一个属性，属性上挂载需要传递的值

在子组件通过props:[“自定义属性名”]来接收数据

父组件代码：

<template>
	<view class="content">
		<!-- //顶部推荐分类 -->
        //自定义属性挂载需要传递的数据
		<heade :content="headerItem"></heade>
    </view>
</template>
<script>

	import heade from '../../components/heade.vue'
    export default {  
		data() {
			return {
				headerItem:[],//顶部推荐分类			
			}
		},
        onLoad() {
			this.getheade();
		},
		components:{
			heade
		},
		methods: {
			async getheade(){				
			   let res=await this.$http('/index','get',{})
			   console.log(res)
			   var data=res.data.data
			   this.headerItem=data.recommend_cate
			 
			}
		}
	}
</script><