Vue（三）-组件间传值和双向数据流实现

最新推荐文章于 2024-09-13 10:58:10 发布

sunny_jiangsu

最新推荐文章于 2024-09-13 10:58:10 发布

阅读量815

点赞数

分类专栏：学习文章标签： Vue组件间传值和双向数据流实现

本文链接：https://blog.csdn.net/sunny_jiangsu/article/details/103147903

版权

本文详细探讨了Vue组件间的通信方式，包括父组件向子组件、子组件向父组件的单向数据传递，以及兄弟组件间通过父组件进行数据交互。此外，还介绍了如何使用v-model实现双向数据绑定，并提供了具体的代码示例，涵盖单个属性和多个属性的双向数据流实现。

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

Vue父子组件间数据流是单向的，即父-》子，虽然是支持双向数据流的，但是不推荐。
本章主要讲组件间传值：父子组件，兄弟组件，v-model传值，父子组件间双向数据流实现。

1. 父组件–》子组件

父组件

<todo-item
      v-for="(item, index) of list"
      :content="item"
      :index="index"
      @delete="DeleteHandle"
    >

子组件

export default {
   
props:  ['content', 'index']
}

2. 子组件–》父组件

子组件

this.$emit('delete', this.cindex);//对外发布一个delete方法，并传参数index

父组件

<todo-item
      v-for="(item, index) of list"
      :content="item"
      :index="index"
      @delete="DeleteHandle"
>

<script>
	export default {
   
		methods: {
   
			DeleteHandle: function(cindex){
   
				console.log(cindex)
			}
		}
	}
</script>