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 = pageNo
            console.log(this.shopList);
            let res = await getAllCommodityMsg(this.shopList.page_size,this.shopList.page_num, this.shopList.desc)
            this.commodityMsg = res.data.data
            this.total = res.data.total
            // console.log(res.data.total);
            // console.log(res);
            console.log(this.commodityMsg);
        },
    },
})

// 对外暴露
export default shopStore;