vue3-组件传值4（$refs和）

2025-03-01 50 阅读1分钟

$refs

1、子组件中通过defineExpose将数据暴露

<script setup>
import { ref } from "vue"
let son1_data = ref("111")
// 把数据交给外部
defineExpose({ son1_data })
</script>

2、父组件中通过ref，直接修改子组件中数据

<template>
  <div class="father">
    <Son1 ref="s1" />
    <button @click="changeSonData">修改子数据</button>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue"
import Son1 from "./Son1.vue"
let s1 = ref();//要在外面定义子组件
function changeSonData() {
  s1.value.son1_data = "父组件修改后的数据"
}
onMounted(()=>{
    emptys.value.name = '父组件修改后的数据'
})
</script>