vue3父组件调用子组件的方法defineExpose

最新推荐文章于 2024-06-19 15:12:15 发布

leveretz

最新推荐文章于 2024-06-19 15:12:15 发布

阅读量1.4k

点赞数 2

文章标签： javascript 前端 vue.js

原文链接：https://www.cnblogs.com/elaine-mz/p/16493056.html

版权

原文地址：Vue3 父组件调用子组件方法 defineExpose - elaine_mz - 博客园

父组件代码：

<template>

  <div class="home">
    <HelloWorld ref="childRef"></HelloWorld>
    <button @click="getChild">触发子组件方法</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from "vue";
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    const childRef = ref();
    const getChild = () => {
      // 第三步： 调用子组件的方法或者变量，通过value
      childRef.value.doSth("随便传值！");
    }
    return{
      getChild,
      childRef
    }
  }
}
</script>

子组件代码：

<template>
  <div class="hello">
  </div>
</template>

<script>
import {defineExpose} from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    const doSth = () => {
      console.log("子组件的 doSth 方法执行了！");
    }
    defineExpose({doSth})
    return{
      doSth
    }
  }
}
</script>