vue组件传值的12种方式

最新推荐文章于 2024-07-23 14:29:05 发布

东方睡衣

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量206

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/127207226

版权

本文详细介绍了Vue2中组件间12种常见的通信方式，包括props、v-model、sync修饰符、ref、$emit、provide/inject、$parent/$children、$attrs/$listeners、Event Bus、Vuex、$root以及插槽等，帮助理解不同场景下的数据传递策略。

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

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