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>
相关推荐
翻滚吧键盘5 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾10 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉18 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。24 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)44 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css