Vue3组件间传值

<template>
  <h1>father:</h1>
  <h3>子组件传过来的：{{ abc }}</h3>
  <input type="text" ref="inp" v-model="msg" />
  <h4>=================================</h4>
  <son :msg="'父组件传过来的：' + msg" @updatas="updatas"></son>
  <h4>=================================</h4>

  <middle></middle>
</template>

<script setup>
import middle from "./middle.vue";
import son from "./son.vue";
import { computed, onMounted, reactive, ref, watch } from "vue";

let msg = ref("0062");
let inp = ref(null);
onMounted(() => {
  console.log(inp.value.value);
  setTimeout(() => {
    inp.value.value = 20;
    msg = inp.value.value;
  }, 1000);
});

let abc = ref("默认值");
let d = ref('')
const updatas = (data) => {
  console.log("子组件传过来的值:" + data);
  //   console.dir(data);
  d.value = data;
  console.dir('d:' + d.value);
};
// let bcd = ref()
abc = computed(() => {
  console.log(d);
  return d.value
});
</script>

<template>
  <h1>son:</h1>
  <h3>{{ msg }}</h3>
  <input type="text" ref="inpu" @input="handlerchange" />
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

defineProps({
  msg: {
    type: String,
    default: "son",
  },
});

const em1 = defineEmits(["updatas"]);
let inpu = ref(null); // 获取ref：inpu
// let valu = ref('00'); // 初始化valu的值为‘00’
let time = ref("");

const handlerchange = (event) => {
  // event.currentTarget.value直接实时获取input输入框的值
  // console.log(event.currentTarget.value);
  // console.log(event);
  // console.dir(event.currentTarget);
  let a = event.currentTarget.value
  clearTimeout(time);
  time = setTimeout(() => { // setTimeout计时结束会执行里面的代码 // 宏任务
    // console.log(inpu.value.value); // 通过ref获取输入的值
    // console.log(event);
    // console.dir(event.currentTarget); // event.currentTarget是一个实时值，而不是快照。随着事件冒泡阶段的结束，它将被解引用，为null。
    em1("updatas", a);
  }, 800);
};

</script>