VUE3 组件通信

props

用途：可以实现父子组件、子父组件、甚至兄弟组件通信

父组件

<template><div><Son :money="money"></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
let money = ref(1000)
</script><style scoped></style>

子组件

<template><div>{{ props.money }}</div>
</template><script setup lang="ts">
/*	两种方式都可以使用		*/
// defineProps({
//     money: {
//         type: Number,
//         default: 666
//     }
// })
let props = defineProps(['money'])
</script><style scoped></style>

自定义事件

用途：可以实现子父组件通信

父组件

<template><div><Son  @zdy = 'handle'></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
const handle = (a:any,b:any)=>{console.log(a,b) //
}
</script><style scoped></style>

子组件

<template><div><Son  @zdy = 'handle'></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
const handle = (a:any,b:any)=>{console.log(a,b) //
}
</script><style scoped></style>

全局事件总线$bus:

用途：可以实现任意组件通信
安装
```
pnpm i mitt
```

配置

新建bus.js文件

import mitt from 'mitt'
const $bus = mitt()
export default $bus

使用

父组件

<template><div><Son  @zdy = 'handle'></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
import $bus from '../utils/bus.js'
$bus.on('dataToParent',(a:any)=>{console.log(a)
})
</script><style scoped></style>

子组件

<template><div><button @click="dataToParent">点击向父组件发送全局事件总线数据</button></div>
</template><script setup lang="ts">
import $bus from '../utils/bus.js'
const dataToParent = ()=>{$bus.emit('dataToParent','hello')
}
</script><style scoped></style>

v-model

父组件

<template><div><Son :money="money"></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
let money = ref(1000)
</script><style scoped></style>

子组件

<template><div>{{ money }}</div>
</template><script setup lang="ts">
defineProps(['money'])
</script><style scoped></style>

useAttrs

父组件

<template><div><Son :money="money" title="attr传参" size='default' type="primary"></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
let money = ref(1000)
</script><style scoped></style>

子组件

<template><div>{{ $attrs.money }} --{{ $attrs.title }}</div>
</template><script setup lang="ts">
import { useAttrs } from 'vue';
let $attrs = useAttrs()
console.log($attrs)
</script><style scoped></style>

provide与inject

父组件

<template><div><Son :money="money"></Son></div>
</template><script setup lang="ts">
import Son from './son.vue'
import { ref,provide } from 'vue';
let money = ref(1000)
provide('name','wang')
</script><style scoped></style>

子组件

<template><div></div>
</template><script setup lang="ts">
import { inject } from 'vue';
let name = inject('name')
console.log(name)
</script><style scoped></style>

ref与$parent

父组件

<template><div><div>当前父组件的money是{{ money }}</div><button @click="take100FromSon">从儿子手里拿100元</button><Son :money="money" ref="son"></Son><Dau></Dau></div>
</template><script setup lang="ts">
import Son from './son.vue'
import Dau from './daughtor.vue'
import { ref } from 'vue';
let son = ref()
let money = ref(1000)
const take100FromSon = ()=>
{son.value.money -=100;money.value+=100
}
defineExpose({money
})
</script><style scoped></style>

儿子组件1

<template><div>儿子的手里有{{ money }}</div>
</template><script setup lang="ts">
import { ref } from 'vue';
let money = ref(500)
defineExpose({money
})
</script><style scoped></style>

儿子组件2

<template><div>
女儿的手里有{{ money }}元
<button @click="take1000FromFather($parent)">从父亲手里拿1000元</button></div>
</template><script setup lang="ts">
import { ref } from 'vue';
let money = ref(5000)
const take1000FromFather = ($parent:any)=>{$parent.money-=1000money.value+=1000
}
</script><style scoped></style>

pinia

安装pinia
```
pnpm i pinia
```

初始化pinia

创建一个store文件夹，在下面新建一个index.js文件

import {createPinia} from 'pinia'
let store = createPinia()
export default store

在main.js文件中声明

import store from './pinia'
app.use(store)

使用pinia

在store下新建一个modules文件夹，用来管理pinia文件，例如，创建了一个test.js文件。

import {defineStore} from 'pinia'
import {ref} from 'vue'
export const testPinia = defineStore('testPinia',()=>{const a = ref('hello')const sendMessage = ()=>{a.value = 'hello,vue'console.log(a.value)}return{a,sendMessage}
})

组件中使用

<template><div></div>
</template><script setup lang="ts">
import {testPinia} from '../pinia/modules/test.js'
const testpinia = testPinia()
console.log(testpinia.a)
testpinia.sendMessage()
</script><style scoped></style>

slot

默认插槽

父组件

<template>
<Son><h1>我是默认插槽填充的结构</h1>
</Son>**具名插槽：**
</template><script setup lang="ts">
import Son from './son.vue'
</script><style scoped></style>

子组件

<template><div><slot></slot></div></template><script setup lang="ts"></script><style scoped></style>

效果图

具名插槽

父组件

<template><h1>slot</h1><Son><template v-slot:a> <!-- //可以用#a替换  --><div>填入组件A部分的结构</div></template><template v-slot:b><!-- //可以用#b替换 --><div>填入组件B部分的结构</div></template></Son>
</template><script setup lang="ts">
import Son from './son.vue'
</script><style scoped></style>

子组件

<template><div><h1>todo</h1><slot name="a"></slot><slot name="b"></slot></div></template><script setup lang="ts"></script><style scoped></style>

效果图

作用域插槽

概念：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)

父组件

<template><div><h1>slot</h1><Son :todos="todos"><template #="{$row,$index}"><!--父组件决定子组件的结构与外观--><span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span></template></Son></div>
</template><script setup lang="ts">
import Son from "./son.vue";
import { ref } from "vue";
//父组件内部数据
let todos = ref([{ id: 1, title: "吃饭", done: true },{ id: 2, title: "睡觉", done: false },{ id: 3, title: "打豆豆", done: true },
]);
</script>
<style scoped>
</style>

子组件

<template><div><h1>todo</h1><ul><!--组件内部遍历数组--><li v-for="(item,index) in todos" :key="item.id"><!--作用域插槽将数据回传给父组件--><slot :$row="item" :$index="index"></slot></li></ul></div>
</template>
<script setup lang="ts">
defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>