vue组件传递数据

在 Vue.js 中，组件之间的数据传递可以通过多种方式实现，以下是一些常用的方法：

父组件向子组件传递数据

####Props

1. 定义Props：在子组件中定义需要接收的属性。

Vue.component('child-component', {
  props: ['parentData'],
  template: '<div>{{ parentData }}</div>'
});

2. 传递数据：在父组件的模板中使用子组件，并通过属性传递数据。

<child-component :parent-data="dataFromParent"></child-component>

在父组件的 data 函数中定义 dataFromParent。

new Vue({
  el: '#app',
  data: {
    dataFromParent: 'Hello from Parent'
  }
});

Attributes

除了在 props 中明确定义的属性，子组件也可以接收任意 attribute，这些 attribute 会被添加到子组件的根元素上。

子组件向父组件传递数据

自定义事件

1. 触发事件：在子组件中使用 $emit 方法触发一个事件，并传递数据。

Vue.component('child-component', {
  methods: {
    sendDataToParent() {
      this.$emit('dataSent', 'Data from child');
    }
  }
});

2. 监听事件：在父组件的模板中监听这个事件，并定义一个方法来接收数据。

<child-component @data-sent="receiveData"></child-component>

在父组件中定义 receiveData 方法。

new Vue({
  el: '#app',
  methods: {
    receiveData(data) {
      console.log(data); // 输出：Data from child
    }
  }
});

非父子组件之间的数据传递

Event Bus

通过创建一个空的 Vue 实例作为中央事件总线（event bus）来在不同组件之间传递数据。

1. 创建Event Bus：

var eventBus = new Vue();

2. 发送事件：在组件A中触发事件。

eventBus.$emit('dataSent', 'Data from Component A');

3. 接收事件：在组件B中监听事件。

eventBus.$on('dataSent', function(data) {
  console.log(data); // 输出：Data from Component A
});

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1. 定义State：在 Vuex store 中定义状态。

const store = new Vuex.Store({
  state: {
    sharedData: 'Shared Data'
  }
});

2. 访问State：在任何组件中通过 this.$store.state 访问状态。

console.log(this.$store.state.sharedData); // 输出：Shared Data

3. 修改State：通过提交 mutations 来修改状态。

store.commit('updateSharedData', 'New Shared Data');

在 Vuex store 中定义 mutation。

mutations: {
  updateSharedData(state, payload) {
    state.sharedData = payload;
  }
}

以上是 Vue.js 中组件之间数据传递的几种常用方式。根据应用的具体需求，可以选择最适合的方法来实现组件间的通信。