Vue3父子传参props和$emit

1. props

父传子，用 props 传数据给子组件有两种方法，如下

方法一，混合写法

// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue"
import {
    
     ref, reactive } from "vue"
export default {
    
    
    data(){
    
    
        return {
    
    
            msg1:"这是传级子组件的信息1"
        }
    },
    setup(){
    
    
        // 创建一个响应式数据
        
        // 写法一 适用于基础类型  ref 还有其他用处，下面章节有介绍
        const msg2 = ref("这是传级子组件的信息2")
        
        // 写法二 适用于复杂类型，如数组、对象
        const msg2 = reactive(["这是传级子组件的信息2"])
        
        return {
    
    
            msg2
        }
    }
}
</script>
 
// Child.vue 接收
<script>
export default {
    
    
  props: ["msg1", "msg2"],// 如果这行不写，下面就接收不到
  setup(props) {
    
    
    console.log(props) // { msg1:"这是传给子组件的信息1", msg2:"这是传给子组件的信息2" }
  },
}
</script>

方法二，纯 Vue3 写法(语法糖)

// Parent.vue 传送
<child :msg2="msg2"></child>
<script setup>
    import child from "./child.vue"
    import {
    
     ref, reactive } from "vue"
    const msg2 = ref("这是传给子组件的信息2")
    // 或者复杂类型
    const msg2 = reactive(["这是传级子组件的信息2"])
</script>
 
// Child.vue 接收
<script setup>
    // 不需要引入 直接使用
    // import { defineProps } from "vue"
    const props = defineProps({
    
    
        // 写法一
        msg2: String
        // 写法二
        msg2:{
    
    
            type:String,
            default:""
        }
    })
    console.log(props) // { msg2:"这是传级子组件的信息2" }
</script>

注意：

如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性

如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性

官方也说了，既然用了 3，就不要写 2 了，所以不推荐混合写法。前端培训下面的例子，一律只用纯 Vue3 的写法，就不写混合写法了

2. $emit

子传父

// Child.vue 派发
<template>
    // 写法一
    <button @click="emit('myClick')">按钮</buttom>
    // 写法二
    <button @click="handleClick">按钮</buttom>
</template>
<script setup>
    
    // 方法一 适用于Vue3.2版本 不需要引入
    // import { defineEmits } from "vue"
    // 对应写法一
    const emit = defineEmits(["myClick","myClick2"])
    // 对应写法二
    const handleClick = ()=>{
    
    
        emit("myClick", "这是发送给父组件的信息")
    }
    
    // 方法二 不适用于 Vue3.2版本，该版本 useContext()已废弃
    import {
    
     useContext } from "vue"
    const {
    
     emit } = useContext()
    const handleClick = ()=>{
    
    
        emit("myClick", "这是发送给父组件的信息")
    }
</script>
 
// Parent.vue 响应
<template>
    <child @myClick="onMyClick"></child>
</template>
<script setup>
    import child from "./child.vue"
    const onMyClick = (msg) => {
    
    
        console.log(msg) // 这是父组件收到的信息
    }
</script>