Vue组件通信传递数据的三种方式
更新时间：2023年04月21日 10:19:07 作者：Wen先森
这篇文章主要介绍了Vue组件通信传递数据的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
Vue传值
Vue.js是一个组件化的前端开发框架，支持父子组件之间的消息传递和数据通信。子组件向父组件传递消息的过程称为“子传父”或“props down，events up”。
具体而言，在Vue.js中，每个组件都可以看作是一个独立的实例，它们之间可以通过特定的Props和Events属性进行双向绑定和通信。子组件在初始化时可以接收来自父组件的数据，并通过props属性绑定这些数据。当子组件需要向父组件发送事件或数据时，可以使用$emit方法触发相应的事件，然后由父组件定义的v-on指令监听并执行相应的操作。
以下是一些关于Vue中props和$emit的常用概念：
- props：在父组件中通过属性的方式向子组件传递数据或方法，子组件中可以通过props属性来获取相关数据或方法，从而实现父子组件之间的信息共享。
- emit：在子组件中通过emit触发自定义事件，并携带需要传递的数据，父组件可以通过v-on监听到这些事件，然后执行相应的操作进行响应。
- sync修饰符： 可以简化子组件向父组件派发事件的过程，添加.sync修饰符后，在父组件中更新子组件的状态时，无需手动监听子组件触发的事件，而是可以直接通过v-model语法糖进行处理，简单来说就是对一个prop进行双向绑定。
总之，“子传父”是Vue中非常重要的一个概念，它可以帮助我们更好地维护组件间的数据和功能的分离，同时也能提高程序的可读性和可维护性。对于在实际开发过程中遇到的“子传父”的问题，需要按照Vue框架的规范和约定来解决问题。
传递数据的三种方式
方式一
通过父组件给子组件绑定一个自定义事件实现：子给父传数据（使用@或v-on）
子组件：通过$emit触发父组件上的自定义事件，发送参数
<template>
<div class="son">
<button @click="setValue">子传值</button>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
value:'子传父的内容'
}
},
methods:{
setValue(){
this.$emit('son',this.value)//触发transfer方法，this.value为向父组件传递的数据
}
}
}
</script>
父组件：通过绑定自定义事件，接受子组件传递过来的参数
<template>
<div class="parent">
<p>父组件接手到的内容：{{ value}}</p>
<Son @son="getValue"></Son>
<!-- 监听子组件触发的自定义事件事件,然后调用getValue方法 -->
</div>
</template>
<script>
import son from './Son'
export default {
name: 'parent',
data () {
return {
msg: '父组件',
value:'',
}
},
components:{son},
methods:{
getValue(value){
this.value= value
}
}
}
</script>
方式二
props实现：子给父传递数据
子组件：
<template>
<div class="son">
<button @click="setValue">子传值</button>
</div>
</template>
<script>
export default {
name: "son",
props: ['getValue']，
data(){
return {
value:'子传父的内容'
}
},
methods:{
setValue(){
this.getValue('son',this.value)//this.value为向父组件传递的数据
}
}
}
</script>
父组件：
<template>
<div class="parent">
<p>父组件接手到的内容：{{ value}}</p>
<Son :getValue="getValue"></Son>
</div>
</template>
<script>
import son from './Son'
export default {
name: 'parent',
data () {
return {
msg: '父组件',
value:'',
}
},
components:{son},
methods:{
getValue(value){
this.value= value
}
}
}
</script>
方式三
使用ref
子组件：
<template>
<div class="son">
<button @click="setValue">子传值</button>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
value:'子传父的内容'
}
},
methods:{
setValue(){
this.$emit('son',this.value)//触发transfer方法，this.value为向父组件传递的数据
}
}
}
</script>
父组件：
<template>
<div class="parent">
<p>父组件接手到的内容：{{ value}}</p>
<Son ref="son" ></Son>
<!-- 监听子组件触发的自定义事件事件,然后调用getValue方法 -->
</div>
</template>
<script>
import son from './Son'
export default {
name: 'parent',
data () {
return {
msg: '父组件',
value:'',
}
},
components:{son},
mounted(){
setTimeout(() =>{
// 函数体
this.$refs.son.$on('son', this.getValue)
}, 3000)
},
methods:{
getValue(value){
this.value= value
}
}
}
</script>
到此这篇关于Vue组件通信传递数据的三种方式的文章就介绍到这了,更多相关Vue组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决VUE中document.body.scrollTop为0的问题
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vite是一个开发环境工具，旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下2021-09-09
本篇文章介绍了Vue单页式应用(Hash模式下)实现微信分享的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue项目使用websocket连接问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了npm install报错缺少python问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了uni-app的开发环境，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要给大家介绍了vue 2.0路由之路由嵌套的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
最近需要有个拖拽列表的需求，发现一个简单好用的 Vue 可拖拽组件，本文主要介绍了可拖拽组件Vue Smooth DnD的使用，感兴趣的可以了解一下2021-07-07
在VUE开发项目的过程中,插槽<slot>是重要的承载分发内容的出口,下面这篇文章主要给大家介绍了关于Vue3插槽(slot)使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了手写实现Vue计算属性，本文从一个简单的计算属性例子开始，一步步实现了计算属性。并且针对这个例子，详细分析了页面渲染时的整个代码执行逻辑，需要的小伙伴可以参考一下2022-08-08
最新评论