Vue3组件间传值

---

12种方式

1. 父组件 ./father.vue

点击查看代码

<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>

2. 子组件 ./son.vue

点击查看代码

<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>