]
一、vue3组件常用的通信方式?
* *vue3组件常用的通信方式(父传子、子传父、父直接获取子、pinia)**
二、使用步骤
提示:以下是本篇文章正文内容,下面案例可供参考
一、父传子?
属性传递(Props):这是从父组件向子组件传递数据的最常用方式。
在父组件的模板中,你可以使用子组件标签并添加属性来传递数据。
子组件通过 props 选项来接收这些数据。
父组件代码
<template>
<div>
<Son :par="arr"></Son>
</div>
</template>
<script setup lang="ts">
import Son from './son.vue'
const arr='我是张三'
</script>
<style scoped >
</style>
子组件代码:
**子组件通过defineProps接受数据**
<template>
<div>
子组件
</div>
</template>
<script setup lang="ts">
import {defineProps} from 'vue'
const {par}=defineProps(['par'])
console.log(par,'父组件传来的');
</script>
<style scoped >
</style>
运行效果
2.子传父
事件发射(defineEmits):子组件可以使用‘defineEmits定义一个自定义事件,
并传递数据给父组件。父组件监听这个事件并处理数据。
代码如下(示例)
子组件代码
<template>
<div>
<div @click="btn" class="box">
</div>
</div>
</template>
<script setup lang="ts">
import {defineEmits} from 'vue'
// 定义一个自定义事件
const emit=defineEmits(['up'])
const value ='我是子组件'
const btn=()=>{
//向父组件传值
emit('up',value)
}
</script>
<style>
.box{
width: 100px;
height: 100px;
border: solid 1px red;
}
</style>
父组件代码
<template>
<div>
父组件
<Son1 @up="btns" ></Son1>
</div>
</template>
<script setup lang="ts">
import Son1 from './son1.vue'
const btns=(aa:string)=>{
console.log(aa,'子组件传来的值');
}
</script>
<style scoped >
</style>
运行效果
3.父直接获取子
子组件通过defineExpose暴露给父组件
代码如下(示例)
子组件代码
<template>
<div>
子组件
</div>
</template>
<script setup lang="ts">
import { ref,defineExpose } from 'vue';
const arr=ref('你好')
//通过defineExpose暴露
defineExpose({arr})
</script>
<style>
</style>
父组件代码
<template>
<div>
父组件
<Son3 ref="childRef"></Son3>
<button @click="btn">点击</button>
</div>
</template>
<script setup lang="ts">
import Son3 from './son3.vue'
import { ref } from 'vue';
const childRef=ref()
const btn=()=>{
console.log(childRef.value.arr);
}
</script>
<style scoped >
</style>
代码效果
4.pinia使用
状态管理:Pinia 是 Vue 3 的状态管理库,它允许你在多个组件
之间共享和管理状态。Pinia 提供了更简洁、更直观的方式来管理全局状态。
首先,安装 Pinia
npm i pinia
然后,在 Vue 中main.ts设置 Pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
接下来,你可以定义和使用 store
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('main', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
randomizeCounter() {
this.count = Math.round(100 * Math.random())
},
},
})
在组件中使用
<template>
<div>
<button @click="store.randomizeCounter()">Randomize
</button>
{{ store.count }}
</div>
</template>
<script setup lang="ts">
import { useCounterStore } from '../stores/counter';
const store = useCounterStore()
// 将 action 作为 store 的方法进行调用
store.randomizeCounter()
</script>
<style scoped >
</style>
效果