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组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue3中对VDOM的改进
这篇文章主要介绍了详解Vue3中对VDOM的改进，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue实现图片拖拽功能
这篇文章主要为大家详细介绍了vue实现图片拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vue利用高德地图API实现实时天气
这篇文章主要为大家详细介绍了Vue如何利用高德地图API实现实时天气,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
VUE实现日历组件功能
本篇文章主要介绍了VUE实现日历组件功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
使用 vue.js 构建大型单页应用
本文给大家详细介绍了如何使用使用 vue.js脚手架工具vue-cli构建大型单页应用的方法，非常的实用，有需要的小伙伴可以参考下
2018-02-02
Vue分页器组件使用方法详解
这篇文章主要为大家详细介绍了Vue分页器组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
用electron 打包发布集成vue2.0项目的操作过程
这篇文章主要介绍了用electron 打包发布集成vue2.0项目的操作步骤,把electron 加入到自己项目中各种不兼容，升级版本踩坑无数个，今天通过本文给大家分享下详细过程，需要的朋友可以参考下
2022-10-10
vue + typescript + 极验登录验证的实现方法
这篇文章主要介绍了vue + typescript + 极验登录验证的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
Vue实现登录以及登出详解
本篇文章主要介绍了vue实现登陆登出的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-09-09
vue使用国密SM4进行加密、解密的过程
国密SM4算法是一种对称加密算法，适用于对称密钥加密和解密的场景，这篇文章主要介绍了vue使用国密SM4进行加密、解密,需要的朋友可以参考下
2023-07-07