![](https://i-blog.csdnimg.cn/blog_migrate/8e8f99b70e531867a035ed4a53592983.png)
vue组件间的12种传值方式
当做到比较大的项目时,一个vue文件里面可能要包含上千行代码,这样不利于后期维护与问题定位,抽离成组件就尤其重要了
重中之重的就是组件之间数据传递的几种方式
Vue2最常见的12种组件间的通讯方式
1.props
2.$emit
3..sync
4.v-model
5.ref
6.$children / $parent
7.$attrs / $listeners
8.provide / inject
9.EventBus
10.Vuex
11.$root
12.slot
1、props
父组件向子组件传送数据,这应该是最常用的方式了
子组件接收到数据之后,不能直接修改父组件的数据。
否则会报错,因为当父组件重新渲染时,数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed
Parent.vue 传送:
<template><child :msg="msg"></child>
</template>
Child.vue 接收:
export default {// 写法一 用数组接收props:['msg'],// 写法二 用对象接收,可以限定接收的数据类型、设置默认值、验证等props:{msg:{type:String,default:'这是默认数据'}},mounted(){console.log(this.msg)},
}
2、.sync 子组件可以修改父组件内容
.sync
可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据
Parent.vue:
<template><child :page.sync="page"></child>
</template>
<script> export default {data(){return {page:1}}
}
Child.vue:
export default {props:["page"],computed(){// 当我们在子组件里修改 currentPage 时,父组件的 page 也会随之改变currentPage {get(){return this.page