Vue 传值技巧：打破组件界限的数据交流

前言

在Vue.js中，组件之间的数据传递是一个关键的主题。本文将深入探讨Vue.js中三种常见的数据传递方式：Props、$emit事件和Vuex。

Props（属性）传递

Props是一种父组件向子组件传递数据的方式，是Vue.js中最基本和常见的数据传递方法。

在父组件中，可以通过在子组件上使用v-bind指令绑定属性，将数据传递给子组件。在子组件中，使用props属性接收传递过来的数据。

父组件

<template>
    <child :message="Message" />
  </template>
  
  <script>
  import Child from './Child.vue';
  
  export default {
    components: {
      Child
    },
    data() {
      return {
        Message: 'Hello from parent!'
      };
    }
  }
  </script>

子组件

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在父组件中通过v-bind指令将父组件的Message数据传递给子组件的message属性。再通过import语句引入了子组件.在子组件中使用props属性声明了一个Props，名为message。这表示子组件可以接收一个名为message的属性，而这个属性的值将由父组件传递。通过这种方式，父组件可以将数据传递给子组件，并在子组件中使用这些数据进行渲染或其他操作。

$emit 事件传递

$emit是Vue.js中用于自定义事件的方法。通过在子组件中触发事件，父组件可以监听这些事件，并接收传递过来的数据。

子组件

<template>
    <button @click="Message">heello</button>
  </template>
  
  <script>
  export default {
    methods: {
      Message() {
        this.$emit('message', 'Hello from child!');
      }
    }
  }
  </script>

父组件

<template>
    <Child @message="Message" />
  </template>
  
  <script>
  import Child from './Child.vue';
  
  export default {
    components: {
      Child
    },
    methods: {
      Message(message) {
        console.log(message); // 输出：Hello from child!
      }
    }
  }
  </script>

在子组件中，使用$emit方法触发了名为message的自定义事件，并传递了一个字符串 'Hello from child!' 作为数据。在父组件的模板中，通过import语句引入了子组件,在父组件的选项中，有一个Message方法，接收从子组件传递过来的数据。通过这种方式，子组件通过$emit触发自定义事件，父组件监听这个事件，并在监听函数中接收从子组件传递过来的数据。

Vuex 状态管理传递

Vuex是Vue.js的状态管理库，用于在应用的各个组件之间共享数据。通过创建一个全局的状态存储，可以实现组件之间的数据传递。

Vuex 状态存储：

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

const store = new Vuex.Store({
  state: {
    message: 'Hello from Vuex!'
  }
});

export default store;

父组件

<template>
  <div>{{ $store.state.message }}</div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
}
</script>

在store.js中引入vuex，通过new Vuex.Store创建一个 Vuex 的 store 实例，在该实例 message 状态中放入一个初始值为 'Hello from Vuex!'。在父组件的模板中，通过插值语法({{ ... }})来显示从Vuex状态存储中获取的数据。$store 是Vue.js提供的全局属性，用于访问Vuex的store实例。在父组件的 computed 属性中，使用一个计算属性 message 来获取 state.message。这确保了当 state.message 发生变化时，视图会自动更新。这段代码的目的是在父组件中展示从Vuex状态存储中获取的消息。

总结

Props（属性）传递：

适用场景： 父子组件之间的简单数据传递。 实现方式： 在父组件中通过 v-bind 绑定属性，子组件通过 props 接收属性。

$emit 事件传递：

适用场景： 子组件向父组件传递数据或通知父组件触发某个操作。 实现方式： 在子组件中使用 $emit 触发自定义事件，父组件通过 @event 监听事件。

Vuex 状态管理传递：

适用场景： 大型应用中多个组件需要共享状态。 实现方式： 使用 Vuex 来创建一个全局状态存储，组件通过 this.$store 访问和修改状态。

感谢您的阅读，一键三连精彩继续