vue3 组件传值

父子传值

// 父亲传值

// 父组件引入子组件 通过自定义名称传入父组件的值
<DeleteGoods :father="userStatus" ></DeleteGoods>

<script setup lang="ts">
import { ref } from "vue"  
import DeleteGoods from '@/components/A_组件传值/A组件.vue'    // 引入子组件

// 父组件的值
const userStatus = ref('user')
</script>

<div class="deleteName">子组件A</div>

// 子组件接收

// 子组件通过引入 defineProps 接收数据
<script setup lang="ts">
import { ref,defineProps} from "vue" 
// 通过defineProps接收父组件的值
const fatherElement = defineProps({
    // 接收传值   此处的father就是父组件的自定义名称 
    father:{   
        type:String,  // 数据类型
        default:"未传值"  // 未传值时的默认值
    }
 })
 console.log(fatherElement.father)  // 打印父组件的值：user
</script>

子传父

// 子组件引入defineEmits发送事件

<div class="deleteName" @click="deleteGoods">子组件A</div>

<script setup lang="ts">
import { ref,defineEmits} from "vue" 

// 子传父通过数组的形式传值，定义子传父的事件defineEmits([自定义名称])
const emit = defineEmits(['deleteOutcome'])

// 子组件值
const backStatus = ref<string>('back')

// 删除
const deleteGoods = () => {
// 通过emit来定义自定义名称和值，deleteOutcome为名称，{backStatus:backStatus.value}为值
        emit('deleteOutcome',{backStatus:backStatus.value}) // 回传 deleteOutcome为自定义名称
    }
}
</script>

父组件

// 父组件引入子组件，通过@子组件的自定义名称关联子组件，valChange为自定义函数，子组件在触发回传deleteOutcome事件的时候，valChange函数会自动调用
<DeleteGoods @deleteOutcome="valChange"></DeleteGoods>

<script setup lang="ts">
import { ref } from "vue"  
import DeleteGoods from '@/components/A_组件传值/A组件.vue'    // 引入子组件

// 子组件回传的数据类型接口
interface IBackStatus {
    backStatus : string
}
// 子组件事件 自带val（自定义）回调参数，在参数这里规定数据类型
const valChange = (val : IBackStatus ) => {
    console.log(val); // 获取子组件的值  打印 user2
}
</script>

事件总线

1. 安装 npm install --save mitt
2. 找到vue项目中的utils文件夹，新建一个bus.js

import mitt from "mitt"; 
const emitter = mitt() 
export default emitter

用法和 $emit$on 一致