vue3 父子组件通信 setup

父传子

father

<template>
  <div>
    <h2>父传子Father</h2>

    <!-- <button class="bg-green-300 rounded p-1" >
      父按钮
    </button> -->
    <div class="w-[200px] h-[200px] bg-violet-200">
      <!-- :msg="fathermessage"父组件通过绑定msg传值给子组件 -->
      <fatherTransChildChild :msg="fathermessage" />
    </div>
  </div>
</template>
<script setup>
import fatherTransChildChild from "../components/FatherTransChild_Child.vue";
import { ref } from "vue";

const fathermessage = ref({ key: "Father", value: "父" });
</script>

child

<template>
  <div>
    <h2>父传子Child</h2>
    <div>拿到父组件的msg：{{ msg.key }}</div>
  </div>
</template>
<script setup>
// const prop = defineProps(["msg"]);
// prop.msg.key = "father";
// console.log(prop.msg.key);

//子组件接收父组件的值msg
defineProps({
  msg: Object,
});
</script>

子传父

father

<template>
  <div>
    <h2>子传父Father</h2>
    <div>拿到子组件的msg{{ sonMsg }}</div>
    <div class="w-[200px] h-[200px] bg-violet-200">
      <child-trans-father-child @get-value="getSonMsg" />
    </div>
  </div>
</template>
<script setup>
import ChildTransFatherChild from "../components/ChildTransFather_Child.vue";
import { ref } from "vue";

const sonMsg = ref("");

const getSonMsg = (value) => {
  sonMsg.value = value;
};
</script>

child

<template>
  <div>
    <h2>子传父Child</h2>
    <button @click="transValue" class="bg-blue-500">传值给父组件</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
//子组件给父组件传值

// 定义所要传给父组件的值
const value = ref("c-message");

// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue"]);

const transValue = () => {
  emit("getValue", value.value);
};
//不想要触发直接 emit("getValue", value.value);即可
</script>

父调子

father

<template>
  <div>
    <h2>父调用子Father</h2>
    <button @click="getSonMethod" class="bg-blue-500">获取子组件的方法</button>
    <div class="w-[200px] h-[200px] bg-violet-200">
      <father-invoke-child-child ref="sonMethodRef" />
    </div>
  </div>
</template>
<script setup>
import FatherInvokeChildChild from "../components/FatherInvokeChild_Child.vue";

import { ref } from "vue";

const sonMethodRef = ref();

const getSonMethod = () => {
  sonMethodRef.value.toFatherMethod();
  console.log(sonMethodRef.value.toFatherValue);
};
</script>

child

<template>
  <div>
    <h2>父调用子Child</h2>
  </div>
</template>
<script setup>
import { ref } from "vue";
// 暴露给父组件的值
const toFatherValue = ref("我是要暴露给父组件的值");

// 暴露给父组件的方法
const toFatherMethod = () => {
  console.log("我是要暴露给父组件的方法");
};

// 暴露方法和属性给父组件
defineExpose({ toFatherMethod, toFatherValue });
</script>

子调父

father

<template>
  <div>
    <h2>子调用父Father</h2>

    <div class="w-[200px] h-[200px] bg-violet-200">
      <child-invoke-father-child @fatherMethod="fatherMethod" />
    </div>
  </div>
</template>
<script setup>
import ChildInvokeFatherChild from "../components/ChildInvokeFather_Child.vue";
const fatherMethod = () => {
  console.log("调用了父组件的方法");
};
</script>

child

<template>
  <div>
    <h2>子调用父Child</h2>
    <button class="bg-blue-500" @click="childMethod()">获取父组件的方法</button>
  </div>
</template>
<script setup>
const emit = defineEmits(["fatherMethod"]);
//fatherMethod 是想要调用父组件的一个方法
const childMethod = () => {
  emit("fatherMethod");
};
</script>