【vue3学习—day4】vue3之父子组件传值问题

父组件传值给子组件

父组件：

<template>
    <div>
        <defu :msg="msg"></defu>
    </div>
</template>
<script setup>
// 引入子组件
import defu from '../components/defu.vue';
let msg = ref("这是父组件里面的参数")

</script>

子组件：

<template>
    <div>
        子组件： {{ msg }}
    </div>
</template>
 
<script setup>
// 接受父组件传过来的参数
defineProps({
    msg: {
        type: String,
        default: "00000"
    }
})
</script>

子传父

自组件：

<template>
    <div>
        子组件： {{ msg }}
        <div @click="getMsg">你好</div>
    </div>
</template>
 
<script setup lang="ts">
import { ref } from "vue";

// 子传父
let msg = ref("子传父的内容。!@#$")

const emit = defineEmits<{
    (e: "fn", id: String): void
}>()

const getMsg = () => {
    emit("fn", msg)
}

</script>

父组件：

<template>
    <div>
        <defu @fn="getData"></defu>
    </div>
</template>
<script setup>
// 子传父
import defu from '../components/defu.vue';
const getData = (n) => {
    console.log(n.value)
}

</script>