Vue3组件如何进行值的传递

子传父：子组件用defineEmits传递

//子组件
<template>
    <div>
        <button @click="btn">我的按钮</button>
    </div>
</template>

<script setup>
import { ref } from "vue"

let sex = ref(2000)
let $emit = defineEmits(['sex'])
let btn = () => {
    $emit('sex', sex.value)
}
</script>

//父组件
<template>
  <div>
    <MyButton @sex="fys" />
  </div>
</template>

<script setup>
let fys = (val) => {
  console.log(val);
}
</script>

父传子： 使用defineProps来接收

//父组件
<template>
    <MyButton :msg="access" />
</template>

<script setup>
let access = '今天天气不错'
</script>

//子组件
<template>
    <div>
        <button>我的按钮</button>
        {{ props.msg }}
    </div>
</template>

<script setup>
const props = defineProps({
    msg: {
        type: String,//参数类型
        required: true,//是否必传
        default: '天气状态' //默认值
    }
});
</script>

简化版传递

父传子 世界使用defineProps(['参数名1'],[‘参数名2’])方式来接收

//父组件
<template>
  <div>
    <MyButton sex="2000" />
  </div>
</template>

//子组件
<template>
    <div>
        <button>我的按钮</button>
    </div>
</template>

<script setup>
let props = defineProps(['sex'])
console.log(props.sex);
</script>

子传父 使用$emit在标签上面直接传递参数 @click="$emit('msg', aa)" msg为事件名，aa为参数

//子组件
<template>
    <div>
        <button @click="$emit('msg', aa)">我的按钮</button>

    </div>
</template>

<script setup>
let aa = '天气不错'
</script>

//父组件
<template>
    <MyButton @msg="as" />
</template>

<script setup>
let as = (val) => {
    console.log(val);
}
</script>