Vue3组件通信的方式

1、父给子传 — props

父组件

<template><h1>父</h1><Son :value="number" /><button @click="add">点我加1</button>
</template><script setup>
import Son from './son.vue';import { ref } from 'vue';
let number = ref(0)
const add = () => {number.value++ console.log(number.value);
}
</script><style scoped></style>

子组件

<template><h1>子{{ value }}</h1>
</template><script setup>
let a = defineProps(['value'])
console.log(a.value);</script><style scoped></style>

2、子给父传 — 自定义事件

父组件

<template><h1>父</h1><Son1 @xxx="clickSon1"></Son1>
</template><script setup>
import Son1 from './son1.vue';const clickSon1 = (params) => {console.log('clickSon1', params);
}
</script><style scoped></style>

子组件

<template><h1 @click="clickSon1">子1</h1>
</template><script setup>
import { defineEmits } from 'vue';
let emit = defineEmits(['xxx']);const clickSon1 = () => {console.log('clickSon1');emit('xxx', '我是子组件1传递的数据')
}</script><style scoped></style>

3、全局事件总线

首先安装mitt，然后实例化一个对象

import mitt from "mitt";
const $bus = mitt();
export default $bus;

子组件1（发布）

<template>子组件1<button @click="handleClick">子组件1</button>
</template><script setup>
import $bus from './bus/index.js'const handleClick = () => {console.log('子组件1')$bus.emit('a',{b:'123'})
}</script>

子组件2（接收）

<template>子组件2
</template><script setup>
import $bus from './bus/index.js'
console.log($bus);
import { onMounted } from 'vue';onMounted(() => {$bus.on('a', (a) => {console.log(a);})
})
</script>

4、V-model

父组件

<template><h1>父组件</h1>{{ money }}<hr><div><son1 v-model="money"></son1></div><hr><div><son2></son2></div><hr>
</template><script setup>
import son1 from './son1.vue'import { ref } from 'vue';
let money = ref(10000)
</script><style scoped></style>

子组件

<template>子组件1{{ modelValue }}<button @click="handler">点我改变接收到的数据</button>
</template><script setup>
import { defineEmits, defineProps } from 'vue'
const props = defineProps(['modelValue'])
const $emits = defineEmits(['update:modelValue'])
const handler = () => {$emits('update:modelValue', props.modelValue + 1000)
}</script><style scoped></style>

5、useAttrs

父组件

<template><h1>父组件</h1><hr><div><son1 title="标题" content="内容" @click="handleClick"></son1></div>
</template><script setup>
import son1 from './son1.vue'
const handleClick = () => {console.log('点击事件触发')
}
</script><style scoped></style>

子组件

<template>子组件1<div><h2>{{ title }}</h2><p>{{ content }}</p><button @click="onClick">点击</button></div>
</template><script setup>
import { useAttrs } from 'vue'
const { title, content, onClick } = useAttrs()</script><style scoped></style>

6、pinia

6.1、Pinia的理解

1. 新定义一个仓库
2. state定义变量，存储相关状态
3. actions请求接口
4. getter相当于计算属性，不怎么用

// 仅定义商品模块中的defineStore，用这个来定义一个store
import { defineStore } from "pinia"// 引入接口
import {getAllCommodityMsg,
} from '@/api/shop/shop'// 通过defineStore来定义一个属于商品的仓库store，内部会自动管理store
const shopStore = defineStore('Shop', {// 存储数据的地方state: () => {return {// 请求商品列表所带的参数shopList: {"page_size": '15',"page_num": '1',"desc": true,},// 存放商品所有数据数组commodityMsg: [],// 一共多少条数据total:'',}},// 异步|逻辑|请求数据actions: {// 获取商品列表接口async commodityList(pageNo) {this.shopList.page_num = pageNoconsole.log(this.shopList);let res = await getAllCommodityMsg(this.shopList.page_size,this.shopList.page_num, this.shopList.desc)this.commodityMsg = res.data.datathis.total = res.data.total// console.log(res.data.total);// console.log(res);console.log(this.commodityMsg);},},
})// 对外暴露
export default shopStore;