vue 组件之间的传值方式

一、父组件向子组件传值

父组件可以使用 props 将数据传递给子组件。

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>


<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

二、子组件向父组件传值

子组件可以通过 $emit方法 来触发一个自定义事件，并传递数据给父组件。

<!-- 父组件 -->
<template>
  <ChildComponent @message-from-child="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>


<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from child!');
    }
  }
};
</script>

三、兄弟组件之间传值

创建一个空的Vue实例作为全局事件中心，用于不同组件间的通信。

创建事件总线：

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

发送方组件：

import { EventBus } from './eventBus';

methods: {
  sendMessage() {
    EventBus.$emit('send-message', 'Hello brother component!');
  }
}

接收方组件：

import { EventBus } from './eventBus';

created() {
  EventBus.$on('send-message', (message) => {
    console.log(message);
  });
}

四、跨多层嵌套组件传值

使用provide和inject，provide和inject提供了一种更简单的方式来让祖先组件向后代组件传递数据，而不需要一层一层地通过props传递。

祖先组件：

export default {
  provide() {
    return {
      providedMessage: 'Hello from ancestor!'
    };
  }
};

后代组件：

export default {
  inject: ['providedMessage'],
  mounted() {
    console.log(this.providedMessage); // 输出: Hello from ancestor!
  }
};

五、任意组件之间的通信

使用Vuex插件，Vuex是Vue官方的状态管理库，适合于管理全局状态或多个组件共享的状态。它允许你以集中式的方式存储和管理应用的所有组件的状态。

• 定义Store：创建一个store文件，定义状态、mutations、actions等。
• 访问Store：在组件中通过this.$store访问store中的状态或分发动作。

原文地址：https://blog.csdn.net/2301_79814793/article/details/144405771

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！