vue组件中各种类型之间的传值

在Vue CLI项目中，组件间的属性传值是一个常见的需求。以下是一些常用的传值方法和规范，以及相应的代码演示和解说：

一. 父组件向子组件传值（Props）

1. 规范：父组件通过属性（props）向子组件传递数据。子组件需要在props选项中声明这些属性。

2. 代码演示：

   （1） 父组件：

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

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: '这是来自父组件的数据'
    };
  }
};
</script>

（2） 子组件：

<template>
  <div>
    {{ parentData }}
  </div>
</template>

<script>
export default {
  props: {
    parentData: String
  }
};
</script>

3. 解说：父组件使用v-bind（或简写为:）将dataFromParent属性传递给子组件。子组件通过声明props来接收这个数据，并可以在模板中使用它。

二. 子组件向父组件传值（Events）

1. 规范：子组件通过发射事件（$emit）向父组件传递数据。父组件通过监听这些事件来接收数据。

2. 代码演示：

   （1）子组件：

<template>
  <div>
    <button @click="sendDataToParent">发送数据到父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('dataToSend', '这是子组件发送的数据');
    }
  }
};
</script>

 （2）父组件：

<template>
  <div>
    <child-component @dataToSend="handleDataFromChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleDataFromChild(data) {
      console.log(data); // 输出：这是子组件发送的数据
    }
  }
};
</script>

3. 解说：子组件通过this.$emit触发一个事件，并传递数据。父组件通过v-on（或简写为@）监听这个事件，并在事件处理函数中接收数据。

三. 兄弟组件传值（Event Bus）

1. 规范：兄弟组件可以通过一个共同的父组件或使用全局事件总线（Event Bus）来传递数据。

2. 代码演示：

   （1）Event Bus：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

（2）兄弟组件A（发送数据）：

<template>
  <div>
    <button @click="sendData">发送数据到兄弟组件</button>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendData() {
      EventBus.$emit('data-to-brother', '这是来自兄弟组件A的数据');
    }
  }
};
</script>

（3）兄弟组件B（接收数据）：

<template>
  <div>
    <div>{{ dataFromBrother }}</div>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      dataFromBrother: ''
    };
  },
  created() {
    EventBus.$on('data-to-brother', this.receiveData);
  },
  methods: {
    receiveData(data) {
      this.dataFromBrother = data;
    }
  },
  beforeDestroy() {
    EventBus.$off('data-to-brother', this.receiveData);
  }
};
</script>

3.代码讲解

这段代码是一个 Vue.js 组件的示例，它使用了 Vue 的事件总线（Event Bus）来接收来自兄弟组件的数据，并将其显示在模板中。以下是对代码的详细解释：

代码结构

1. 模板部分 (<template>):
   • 这是一个简单的 Vue 模板，包含一个 div 元素，用于显示从兄弟组件接收到的数据。
   • {{ dataFromBrother }} 是 Vue 的插值语法，用于动态绑定数据。
2. 脚本部分 (<script>):
   • 定义了一个 Vue 组件，包含 data、created、methods 和 beforeDestroy 生命周期钩子。

代码详细解释

1. 数据绑定

data() {
  return {
    dataFromBrother: ''
  };
}

• data 是 Vue 组件的选项，用于定义组件的响应式数据。
• dataFromBrother 是一个字符串，用于存储从兄弟组件接收到的数据。

2. 事件监听

created() {
  EventBus.$on('data-to-brother', this.receiveData);
}

• created 是 Vue 的生命周期钩子，表示组件实例被创建后执行的代码。
• EventBus.$on 是事件总线的监听方法，用于监听事件 'data-to-brother'。
• 当事件 'data-to-brother' 被触发时，调用 this.receiveData 方法。

3. 数据接收

methods: {
  receiveData(data) {
    this.dataFromBrother = data;
  }
}

• methods 是 Vue 组件的选项，用于定义组件的方法。
• receiveData 是一个方法，接收一个参数 data，并将该数据赋值给 dataFromBrother。

4. 事件解绑

beforeDestroy() {
  EventBus.$off('data-to-brother', this.receiveData);
}

• beforeDestroy 是 Vue 的生命周期钩子，表示组件销毁之前执行的代码。
• EventBus.$off 是事件总线的解绑方法，用于移除事件 'data-to-brother' 的监听器。
• 这一步非常重要，避免内存泄漏和不必要的事件触发。

事件总线（Event Bus）

事件总线是一种在 Vue 组件之间通信的方式，适用于兄弟组件之间的通信。它通过一个共享的事件中心来触发和监听事件。

事件总线的定义

在 event-bus.js 文件中，通常会这样定义事件总线：

import Vue from 'vue';
export const EventBus = new Vue();

• 这里创建了一个新的 Vue 实例作为事件总线。

使用场景

假设有一个兄弟组件，它通过事件总线发送数据：

// 兄弟组件
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendData() {
      const dataToSend = 'Hello from brother component';
      EventBus.$emit('data-to-brother', dataToSend);
    }
  }
};

• 当 sendData 方法被调用时，它通过事件总线触发 'data-to-brother' 事件，并传递数据。

总结

这段代码展示了如何使用 Vue 的事件总线在兄弟组件之间通信。通过监听和触发事件，组件可以共享数据，而不需要直接的父子关系。

四. 跨级组件传值（Provide/Inject）

1. 规范：祖先组件可以使用provide选项提供数据，而子孙组件可以使用inject选项注入这些数据。

2. 代码演示：

   （1）祖先组件：

<template>
  <div>
    <descendant-component />
  </div>
</template>

<script>
import DescendantComponent from './DescendantComponent.vue';

export default {
  components: {
    DescendantComponent
  },
  provide() {
    return {
      crossLevelData: '这是跨级传递的数据'
    };
  }
};
</script>

 （2）子孙组件：

<template>
  <div>
    {{ crossLevelData }}
  </div>
</template>

<script>
export default {
  inject: ['crossLevelData']
};
</script>

3. 解说：祖先组件通过provide提供数据，子孙组件通过inject注入这些数据。这种方法适用于跨越多个层级的组件通信。

这些是在Vue CLI项目中常用的组件间属性传值的方法和规范。每种方法都有其适用场景，开发者可以根据具体需求选择最合适的传值方式。