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"); // ref初始化值基本类型，reactive用来初始化对象、数组

			//这里 let msg = proxy({value:'0062'})

let inp = ref(null); // 获取ref：inp

console.log(inp.value); // null

// console.log(inp.value.value); // 报错：不能读取为空(null)的属性

onMounted(() => {

  console.log(inp.value.value); // 0062

  setTimeout(() => {

    inp.value.value = 20;  // 改变输入框的值为20

    msg = inp.value.value; // 直接赋值，失去其响应性。原本的msg是个对象可改为msg.value=inp.value.value;

						   // 这里是mounted函数内部，当再次输入值的时候，msg会重获其响应性

						   // msg在vue的template中使用，不需要.value；

  }, 1000);

});

let abc = ref("默认值");

let d = ref('')

const updatas = (data) => { // 接收子组件传来的值，在子组件利用defineEmits调用该函数

  console.log("子组件传过来的值:" + data); // data为子组件传进来的参数值

  //   console.dir(data);

  d.value = data; // 这里的d.value是因为vue3里面ref赋值的变量需要通过.value的形式取值，

  				  // ref里面是调用的reactive。

  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>