Vue.js中常见的组件通信-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48683341/article/details/118657672

本文详细介绍了Vue中组件间的通信方式，包括父组件向子组件传值，子组件向父组件传值，以及兄弟组件间如何通过父组件进行通信。通过实例展示了props、$emit和watch等关键概念的应用，帮助开发者理解Vue组件通信的基本原理和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 父组件向子组件传值

父组件通过以属性的方式把值绑定在子组件上身上。
子组件通过props属性来接收该值

举个栗子来看一下：

父组件

<div>
        <input type="text" v-model="fv" >
        <div>fv: {{fv}} </div>
        <hr>
        <son1 :fv = "fv" ></son1>
    </div>
</template>
<script>

import son1 from './views/son1.vue'

export default {
    components:{
        'son1' : son1,
    },
    data(){
        return{
            fv : ''
        }
    }
    
}
</script>

子组件

<template>
  <div>
      <h3>son1.vue</h3>
      <input type="text" v-model="sv" >
      <br>
        fv:{{fv}}
  </div>
</template>

<script>
export default {
//接收父组件传值
    props:{
        fv : String
    }  
}
</script>

2. 子组件想父组件传值

子组件利用监听器watch监听数据的改变
当数据发生改变时，通过$emit()触发事件来进行子传父传值
$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据
父组件用v-on 监听子组件的事件

再来举个栗子

父组件：

<son1 :fv = "fv" :sv = "sv" @get='handel'></son1>

 components:{
        'son1' : son1,
    },
    data(){
        return{
            fv : '',
            sv : ''
        }
    },
    methods:{
        handel(val){
            this.sv = val
        }
    }

子组件

<input type="text" v-model="sv" >

watch:{
        sv(val){
            this.$emit('get',val)
        }
    },
    data(){
        return{
            sv : ''
        }
    }

3. 兄弟组件传值

先由第一个子组件传值给父组件，然后通过父组件再传值给另一个子组件。