vue踩坑填坑（二）：组件之间的传值问题

最新推荐文章于 2025-05-21 16:08:24 发布

原创最新推荐文章于 2025-05-21 16:08:24 发布 · 3.6k 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

本文详细介绍了Vue组件间的通信方法，包括父组件向子组件传递值、子组件向父组件回传值以及兄弟组件之间的通信。通过props、事件监听和自定义事件实现，为开发者提供了实用的解决策略。

组件开发中难免会遇到子组件父组件之间以及兄弟组件之间的传值问题。

1、父组件传值给子组件：

如果父组件需要将placeholder值传给子组件，则在父组件标签中定义：placeholder="XXX",子组件在data中定义props:['placeholder']来接受，这样接收过来的placeholder就可以直接用this.label取出使用。

注意：props属性只可以取出使用，并不能改变其值。

父组件中：

<inputText :placeholder="control.placeholder"></inputText>

子组件中：

 <input type="text" v-model="modelValue" :placeholder="placeholder">

export default {
    data() {
      return {
        modelValue:'',
      }
    },
    props:['placeholder'],
}

2、子组件传值给父组件：

如果子组件需要将input输入框的值传给父组件，则子组件中定义触发事件v-on:blur="change"(这里用的是失去焦点触发)，在change事件中使用$emit来传值，父组件中定义方法来接受即可，如下

子组件中：

<input type="text" v-model="modelValue" :placeholder="placeholder" v-on:blur="change">

change方法：

change(){
    const self = this;
    self.$emit('transferParamSelect',{value:self.modelValue});
}

父组件中：

<inputText :placeholder="control.placeholder"  v-on:transferParamSelect="getParamSelect($event)"></inputText>

getParamSelect(msg){   
   console.log(this.msg.value);   // 获取子组件传值结果
}

3、兄弟组件之间传值。

首先需要定义一个vue引入文件Hub.js

import Vue from 'vue'
export default new Vue()

两个需要传值的组件都同时引入Hub.js

import Hub from '../js/hub'

组件A:

Hub.$emit('change',{value:self.modelValue}) //$emit触发监听方法,将value传至B组件

组件B:

 Hub.$on('change',function(msg){
   console.log(msg.value);
 })

123123