vue3父组件调用子组件方法，属性(ref)defineExpose；子组件调用父组件属性方法($parent)defineExpose

前端小云儿

已于 2024-03-19 15:29:33 修改

阅读量272

点赞数

分类专栏： vue技能提升文章标签： vue.js 前端 javascript

于 2024-02-07 15:21:14 首次发布

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136069938

版权

vue技能提升专栏收录该内容

46 篇文章 2 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

一父组件调用子组件方法，属性(ref)defineExpose；

子组件

<template>
  <input type="text" v-model="msg" />
  <div>子组件：父组件调用子组件方法，属性</div>
</template>
<script setup>
import { ref, reactive, defineExpose } from "vue";
let defineProps = defineProps(["id"]);
let info = reactive({
  like: "王者荣耀",
  age: 18,
});
// 变量
const msg = ref("王三麻子");

function getmsg() {
  return msg;
}
//1 先定义defineExpose,注意上面要引入
defineExpose({ info, getmsg });
</script>

父组件

<template>
  <div id="app">
    <el-button @click="clickGetChild">获取子组件的值</el-button>
    <!-- 2 ref [refHomeCom]和组件名称不要相同 -->
    <homeCom ref="refHomeCom" :id="id"></homeCom>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vu