Vue3 父子组件互相触发方法

本文主要是介绍Vue3 父子组件互相触发方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

父组件

<template>
  <el-button type="primary" @click="faEvent">父组件</el-button>

  <hr />

  <!-- 父2子 步骤 1. 定义ref -->
  <!-- 子2父 步骤 3. 父组件创建自定义事件 -->
  <SonCpt ref="sonRef" @childEvent="childEvent" />
</template>

<script>
import { ref } from "vue";
import SonCpt from "./son.vue";

export default {
  components: { SonCpt },
  setup() {
    // 父2子 步骤 2. 获取引用
    const sonRef = ref();
    const faEvent = () => {
      // 父2子 步骤 4. 在某个时机触发子组件方法
      sonRef.value.faEvent("我是写在index组件的方法");
    };

    // 子2父 步骤 4. 父组件创建对应的方法
    const childEvent = (v) => {
      console.log("index里面的函数", v);
    };

    // 父2子 步骤 3. 导出引用, 不导出获取的引用是undefined
    // 子2父 步骤 7. 父组件导出方法
    return { sonRef, faEvent, childEvent };
  },
};
</script>

<style>
</style>

子组件

<template>
  <el-button type="danger" @click="childEvent">子组建</el-button>
</template>

<script>
export default {
  props: ["msg"],
  // 子2父 步骤 1. 结构emit
  setup(props, { emit }) {
    // 父2子 步骤 5. 自组建定义方法
    const faEvent = (v) => {
      console.log("子组建的方法, 接收到的内容为:" + v);
    };

    const childEvent = () => {
      // 子2父 步骤 2.使用emit触发父组件方法
      emit("childEvent", "我是写在son里面的msg");
    };

    // 父2子 步骤 6. 自组建需要导出该方法
    return { faEvent, childEvent };
  },
};
</script>

<style>
</style>

这篇关于Vue3 父子组件互相触发方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！