vue间的组件通讯

文章目录

    • 父子组件通讯(通过props和$emit)
    • 兄弟组件通讯(使用事件总线):
    • 跨级组件通讯(使用provide/inject):
    • 使用Vuex状态管理:
    • 使用$refs引用组件:

父子组件通讯(通过props和$emit)

父组件可以通过props将数据传递给子组件,子组件可以通过$emit触发事件将数据传递回父组件。

javascript 复制代码
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  data() {
    return {
      parentMessage: 'Hello from parent',
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    handleChildEvent(data) {
      console.log('Data received from child:', data);
    },
  },
};
</script>
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="emitEvent">Send Event</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    emitEvent() {
      this.$emit('childEvent', 'Data from child');
    },
  },
};
</script>

兄弟组件通讯(使用事件总线):

可以通过共享一个父组件中的数据或使用事件总线(Event Bus)来实现兄弟组件之间的通讯

javascript 复制代码
// EventBus.js
import Vue from 'vue';
export default new Vue();
<!-- ComponentA.vue -->
<template>
  <div>
    <input type="text" v-model="message" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    sendMessage() {
      EventBus.$emit('messageEvent', this.message);
    },
  },
};
</script>
<!-- ComponentB.vue -->
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      receivedMessage: '',
    };
  },
  mounted() {
    EventBus.$on('messageEvent', (message) => {
      this.receivedMessage = message;
    });
  },
};
</script>

跨级组件通讯(使用provide/inject)

可以使用provide/inject来在祖先组件中提供数据,并在后代组件中注入数据。

javascript 复制代码
<!-- GrandparentComponent.vue -->
<template>
  <div>
    <ParentComponent>
      <ChildComponent />
    </ParentComponent>
  </div>
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    const sharedData = 'Shared Data';

    provide('sharedData', sharedData);

    return {};
  },
};
</script>
<!-- ParentComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ injectedData }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedData = inject('sharedData');

    return {
      injectedData,
    };
  },
};
</script>

使用Vuex状态管理

Vuex是Vue官方提供的状态管理库,可以用于在不同组件之间共享状态。

首先,需要安装和配置Vuex。然后,可以使用store中的state、mutations、actions等来修改和获取共享状态。

javascript 复制代码
// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      message: '',
    };
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    },
  },
});

export default store;
<!-- ComponentA.vue -->
<template>
  <div>
    <input type="text" v-model="message" />
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    updateMessage() {
      const store = useStore();
      store.commit('setMessage', this.message);
    },
  },
};
</script>
<!-- ComponentB.vue -->
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const receivedMessage = computed(() => {
      return store.state.message;
    });

    return {
      receivedMessage,
    };
  },
};
</script>

使用$refs引用组件

每个Vue组件都有一个唯一的ref属性,可以用于在父组件中引用子组件的实例,然后通过实例直接调用子组件的方法或访问数据。

javascript 复制代码
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    },
  },
};
</script>
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ childData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: 'Data from child',
    };
  },
  methods: {
    childMethod() {
      console.log('Child method called');
    },
  },
};
</script>
相关推荐
牧羊狼的狼29 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常5 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip5 小时前
JavaScript事件流
前端·javascript