父组件传值给子组件
父组件:
<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>