Vue父组件向子组件传值

一、Vue父组件向子组件传值的三种方式

Vue是一个使用组件化开发的框架，组件间的通信也是非常重要的。父组件向子组件传值也是其中最常见的需求之一。Vue提供了多种方式来实现这一目的。

1. 父组件向子组件传值的方法

最简单的方式就是通过props来实现。在父组件的template中定义需要传递的值，然后在子组件的props中接收。具体来说，可以分为以下几步：

//父组件template

  


//子组件props
export default {
  props: {
    msg: String
  }
}

在父组件中，通过传递props属性message到子组件中。然后在子组件props中定义msg接收传递的props属性。

2. 父组件向子组件传值

还有一种方式是通过子组件的data和watch实现，这种方式适合需要对传递的值进行进一步处理的情况。以下是一个示例：

//父组件template

  


//子组件data和watch
export default {
  data() {
    return {
      msg: ''
    }
  },
  watch: {
    '$parent.message'(newVal) {
      this.msg = newVal
    }
  }
}

在父组件中不需要传任何属性到子组件，子组件自身定义了一个data属性msg。在子组件的watch中监听父组件的属性message，一旦有变化则将其赋值到msg属性中。

3. Vue父子组件传值属性

最后一种方式是通过事件来实现，适用于父组件需要与子组件进行交互的情况。具体步骤如下：

//父组件template

  


//子组件template


//子组件methods
methods: {
  handleClick() {
    this.$emit('callback', '传递值')
  }
}

在父组件中，定义一个回调函数handleCallback，并在子组件中使用$emit触发callback事件，并将需要传递的值作为参数传递。

二、Vue父组件和子组件传值

父组件和子组件的传值是单向的，父组件传递给子组件的值不能直接影响到父组件的值。如果需要从子组件向父组件进行传值，可以采用以下方式：

子组件向父组件传值

子组件向父组件传值可以通过在父组件中定义一个自定义事件，子组件触发事件并传递需要的值实现。示例代码如下：

//父组件template

  


//子组件template


//子组件methods
methods: {
  handleClick() {
    this.$emit('childEvent', '子组件传递的值')
  }
}

在子组件中使用$emit触发childEvent自定义事件，并将需要传递的值作为参数传递。在父组件中通过@childEvent监听该自定义事件并执行相应方法。

三、Vue兄弟组件传值

在 Vue 中，兄弟组件之间数据的传递比较复杂，需要借助于Vue实例中的事件总线EventBus或者全局状态管理工具Vuex。下面分别介绍这两种方式：

1. Vue父子组件通信

使用EventBus实现兄弟组件的通信，具体步骤如下：

//main.js
import Vue from 'vue';

//创建事件总线bus
export const bus = new Vue();

//组件1中向事件总线发送消息
bus.$emit('message', message);

//组件2中接收事件总线发送的消息
bus.$on('message', (message) => {});

在main.js中创建事件总线bus并导出，然后在需要通信的组件中分别使用$emit和$on方法来发送和接收消息。$emit方法的第一个参数为消息名，第二个参数为需要发送的数据。$on方法用于在组件中监听对应的事件并执行相应的操作。

2. Vue父子组件传值方法

如果在一个大型项目中兄弟组件之间传值比较频繁的话，使用EventBus可能会造成混淆和不易维护。此时可以考虑使用Vuex进行状态管理，将需要共享的数据集中管理。以下是基于Vuex的兄弟组件传值示例：

//store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

//创建store
export default new Vuex.Store({
  state: {
    message: ''
  },
  getters: {},
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  },
  actions: {}
})；

//组件1中向store提交数据
this.$store.commit('setMessage', message)

//组件2中通过计算属性获取store中的数据
computed: {
  message() {
    return this.$store.state.message;
  }
}

在store.js中定义需要共享的数据和相应的mutation方法。然后在组件1中使用$store.commit方法提交修改的数据，组件2通过计算属性获取修改后的数据即可。

四、Vue组件传值的五种方法

除了上述几种方式，Vue还提供了多种传值方式。但是在实际开发中并不是所有情况下都适用。以下总结了Vue常用的五种组件传值方式：

1. props传值：适用于父子组件之间单向的数据传递。

2. $emit传值：适用于父子组件之间通过事件通信。

3. bus传值：适用于兄弟组件之间的通信。

4. provide与inject传值：适用于祖先组件向后代组件传递数据，不论子孙组件嵌套层级有多深。

5. Vuex传值：适用于大型项目中需要在多个组件之间共享数据。

总结

Vue父组件向子组件传值是Vue中组件传值的基础，而兄弟组件之间的数据传递也是一个非常重要的需求。Vue提供了多种传值方式，开发者可以根据具体实际需求选择相应的方式。个人认为在项目初期可以使用props和$emit进行数据传递，如果后续项目中兄弟组件之间的数据传递很频繁，可以考虑使用Vuex进行集中管理。

原创文章，作者：IEJU，如若转载，请注明出处：https://www.506064.com/n/145047.html