父组件用ref获取子组件数据

子组件
Son/index.vue

子组件的数据和方法一定要记得用defineExpose暴露，不然父组件用ref是获取不到的！！！

script setup>
import { ref } from "vue";
const sonNum = ref(1);
const changeSon = () => {
  sonNum.value++;
};

defineExpose({
  sonNum,
  changeSon,
});
/script>

template>
  div class="son">
    {{ sonNum }}
  /div>
/template>

style scoped lang="scss">
.son {
  width: 100px;
  height: 20px;
  border: 1px pink solid;
}
/style>

Father/index.vue

script setup>
import { ref, onMounted, watch, computed } from "vue";

import Son from "../Son/index.vue";
const SonRef = ref(null);
let father = ref();
let sonNumInFather = ref(null);
// console.log("SonRef.value", SonRef.value);
onMounted(() => {
  father.value = SonRef.value.sonNum;
  console.log("SonRef.value", SonRef.value.sonNum);
  console.log("SonRef.value", SonRef.value.changeSon);

  //   sonNumInFather.value = SonRef.value.sonNum;这样写也可以，但是不会是响应式数据，就永远是初始化的1，不会因为点击按钮就++
服务器托管网
  //   用watch可以实现sonNumInFather是响应数据
  //   watch(
  //     () => SonRef.value.sonNum,
  //     () => {
  //       father.value = SonRef.value.sonNum;
  //       console.log("hhhhh");
  //     }
  //   );
  //  用computed可以实现sonNumInFather是响应数据
  sonNumInFather.value = computed(() => {
    return SonRef.value.sonNum;
  });
});

const FatherChangeSon = () => {
  SonRef.value.changeSon();
};
/script>

template>
  button @click="FatherChangeSon">son+1/button>
  Son ref="SonRef">/Son>
  {{ sonNumInFather }}
  !-- 下面这两个都渲染不成功，都不行 -->
  !-- {{ SonRef.sonNum }} -->
  !-- {{ father }} -->
/template>

style scoped lang="scss">/styl服务器托管网e>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net