javascript - vue3 中如何方法传递？

Question

在vue3中，如何实现定义的function传递（比如我在demo.vue页面写了一个function init(){} 的方法，里面写了内容，但是我在另外一个组件里面定了一个按钮，点击这个按钮，就会调用在demo.vue 里面的init()方法）。我试过用emitter.emit/emitter.on 这个办法貌似不可取，求指教谢谢~

Answer 1

使用eventBus全局时间总线就行了，数据传输以及共享都可以实现

Answer 2

（一步到位）可以安装第三方插件 vue3-eventbus(事件总线)，来实现 vue2 的事件总线功能，实现父子/子父/兄弟组件的传值

或者使用 props 方法传递过去（父传子）

provide、inject 方法 （）（父传子/孙）兄弟组件之间就会失效

Answer 3

<template>
  <!-- 其他代码 -->
</template>

<script>
export default {
  name: 'Demo',
  setup() {
    const init = () => {
      console.log('init function in Demo.vue');
    };

    // 提供 init 方法
    provide('initFunction', init);

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

然后在你的另一个组件里：

<template>
  <button @click="callInitFunction">Call Init Function</button>
</template>

<script>
export default {
  name: 'AnotherComponent',
  setup() {
    // 接收 init 方法
    const initFunction = inject('initFunction');

    const callInitFunction = () => {
      initFunction();
    };

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

Answer 4

你的传递方法的组件都没有加载怎么监听到呢

Answer 5

得先确定哪个是父组件哪个是子组件，如果demo是父组件，那可以把init当做一个props属性传给子组件，或者使用emit进行通信，如果demo是子组件，那可以在父组件中给demo绑定ref，然后直接使用ref.value.init调用demo的函数，不过需要注意，demo中的init需要使用defineExpose({init})暴露出去不然，父组件调用不到这个方法

Answer 6

provide和inject可以

provide('isCompleted',isCompleted)
const isCompleteds = inject('isCompleted',Function,true)