vue3组件通信方式
props
- 注意：
- 只读，不能修改
- props 可以实现父子组件通信,在vue3中我们可以通过
defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！ - 子组件获取到props数据就可以在模板中使用了,但是切记props是只读的，不能修改
父组件给子组件传递数据
// 父
<Child info="我爱祖国" :money="money"></Child>
方式1: 子组件获取父组件传递数据
<script setup lang="ts">
// 子
let props = defineProps({
info:{
type:String,//接受的数据类型
default:'默认参数',//接受默认数据
},
money:{
type:Number,
default:0
}})
</script>
方式2: 子组件获取父组件传递数据
// 子
<script setup lang="ts">
// 使用 defineProps 方法,接受父组件传递过来的数据
// defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['title','money']); //数组|对象写法都可以
//按钮点击的回调,注意数据只读，不能修改
const updateProps = ()=>{
// props.money += 10; props:只读，不能修改
console.log(props.title)
}
</script>
自定义事件
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。
原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave....
自定义事件可以实现子组件给父组件传递数据
原生DOM事件
代码如下:
<pre @click="handler">
我是原生DOM事件
</pre>
当前代码级给pre标签绑定原生DOM事件点击事件,默认会给事件回调注入event事件对象。当然点击事件想注入多个参数可以按照下图操作。但是切记注入的事件对象务必叫做$event.
<div @click="handler1(1,2,3,$event)">多个参数传递</div>
在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
自定义事件
- 自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。
- 比如在父组件内部给子组件(Event2)绑定一个自定义事件
// 父
<Event2 @xxx="handler3"></Event2>
在Event2子组件内部触发这个自定义事件
// 子
<template>
<div>
<h1>我是子组件2</h1>
<button @click="handler">点击我触发xxx自定义事件</button>
</div>
</template>
<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(["xxx"]);
const handler = () => {
$emit("xxx", "法拉利", "茅台");
};
</script>
<style scoped>
</style>
我们会发现在script标签内部,使用了defineEmits方法，此方法是vue3提供的方法,不需要引入直接使用。defineEmits方法执行，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个$emit方法用于触发自定义事件。
当点击按钮的时候，事件回调内部调用$emit方法去触发自定义事件,第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。
需要注意的是:代码如下
<Event2 @xxx="handler3" @click="handler"></Event2>
正常说组件标签书写@click应该为原生DOM事件,但是如果子组件内部通过defineEmits定义就变为自定义事件了
// 也可以指定为click事件，这会和原生事件同时触发
let $emit = defineEmits(["xxx",'click']);
全局事件总线mitt
- 使用插件mitt实现。
安装
$ npm install --save mitt
使用
- 创建一个bus文件
// 引入mitt插件:mitt一个方法,方法执行会返回bus对象
import mitt from 'mitt';
const $bus = mitt();
export default $bus;
- 传递参数组件
<template>
<div>
<button @click="getParma">点击我传递参数</button>
</div>
</template>
<script setup lang="ts">
//引入$bus对象
import $bus from '../bus';
//点击按钮回调
const getParma = ()=>{
// 第一个参数：自定义事件名称，第二个： 需要传递的数据
$bus.emit('onParma',{name:"我是需要传递的数据"});
}
</script>
- 接受数据组件
<template>
<div>
<h5>获取传递过来的参数：</h5>
{{ parma }}
</div>
</template>
<script setup lang="ts">
import $bus from "../bus";
//组合式API函数
import { onMounted , ref} from "vue";
const parma = ref('')
//组件挂载完毕的时候,当前组件绑定一个事件,接受将来兄弟组件传递的数据
onMounted(() => {
//第一个参数:即为事件名称 第二个参数:即为事件回调
$bus.on("onParma", (data) => {
parma.value = data.name
});
});
</script>
v-model
- v-model指令可是收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。
- v-model实指利用
props[modelValue]与自定义事件[update:modelValue]实现的。 - 下方代码:相当于给组件Child传递一个
props(modelValue)与绑定一个自定义事件update:modelValue
实现父子组件数据同步
<Child v-model="msg"></Child>
在vue3中一个组件可以通过使用多个v-model
- 让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize
- 以及绑定两个自定义事件update:pageNo与update:pageSize实现父子数据同步
// 父
<Child v-model:pageNo="msg" v-model:pageSize="msg1"></Child>
<script setup >
//v-model指令:收集表单数据,数据双向绑定
//v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//父亲给子组件数据 props
//子组件给父组件数据 自定义事件
//引入子组件
import Child from "./Child.vue";
import { ref } from "vue";
//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
</script>
// 子
<template>
<div class="child2">
<h1>同时绑定多个v-model</h1>
<button @click="handler">pageNo{{ pageNo }}</button>
<button @click="$emit('update:pageSize', pageSize + 4)">
pageSize{{ pageSize }}
</button>
</div>
</template>
<script setup>
let props = defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
//第一个按钮的事件回调
const handler = () => {
$emit("update:pageNo", props.pageNo + 3);
};
</script>
useAttrs
在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中$attrs属性与$listeners方法。
比如:在父组件内部使用一个子组件my-button
<my-button type="success" size="small" title='标题' @click="handler"></my-button>
子组件内部可以通过useAttrs方法获取组件属性与事件.因此你也发现了，它类似于props,可以接受父组件传递过来的属性与属性值。需要注意如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。
<script setup lang="ts">
import {useAttrs} from 'vue';
let $attrs = useAttrs();
</script>
ref与$parent
ref,提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。
比如:在父组件挂载完毕获取组件实例
父组件内部代码:
<template>
<div>
<h1>ref与$parent</h1>
<Son ref="son"></Son>
</div>
</template>
<script setup lang="ts">
import Son from "./Son.vue";
import { onMounted, ref } from "vue";
const son = ref();
onMounted(() => {
console.log(son.value);
});
</script>
但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问
<script setup lang="ts">
import { ref } from "vue";
//数据
let money = ref(1000);
//方法
const handler = ()=>{
}
defineExpose({
money,
handler
})
</script>
$parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露
<button @click="handler($parent)">点击我获取父组件实例</button>
provide与inject
provide[提供]
inject[注入]
vue3提供两个方法provide与inject,可以实现隔辈组件传递参数
组件组件提供数据:
provide方法用于提供数据，此方法执需要传递两个参数,分别提供数据的key与提供数据value
<script setup lang="ts">
import {provide} from 'vue'
provide('token','admin_token');
</script>
后代组件可以通过inject方法获取数据,通过key获取存储的数值
<script setup lang="ts">
import {inject} from 'vue'
let token = inject('token');
</script>
pinia
pinia官网:https://pinia.web3doc.top/
pinia也是集中式管理状态容器,类似于vuex。但是核心概念没有mutation、modules,使用方式参照官网
插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信.
默认插槽:
在子组件内部的模板中书写全局组件标签
<template>
<div>
<></>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件
注意开发项目的时候默认插槽一般只有一个
<Todo>
<h1>我是默认插槽填充的结构</h1>
</Todo>
具名插槽：
顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。
下面是一个子组件内部,模板中留两个插槽
<template>
<div>
<h1>todo</h1>
< name="a"></>
< name="b"></>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
父组件内部向指定的具名插槽传递结构。需要注意v-：可以替换为#
<template>
<div>
<h1></h1>
<Todo>
<template v-:a> //可以用#a替换
<div>填入组件A部分的结构</div>
</template>
<template v-:b>//可以用#b替换
<div>填入组件B部分的结构</div>
</template>
</Todo>
</div>
</template>
<script setup lang="ts">
import Todo from "./Todo.vue";
</script>
<style scoped>
</style>
作用域插槽
作用域插槽：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)
子组件Todo代码如下:
<template>
<div>
<h1>todo</h1>
<ul>
<!--组件内部遍历数组-->
<li v-for="(item,index) in todos" :key="item.id">
<!--作用域插槽将数据回传给父组件-->
< :$row="item" :$index="index"></>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>
父组件内部代码如下:
<template>
<div>
<h1></h1>
<Todo :todos="todos">
<template v-="{$row,$index}">
<!--父组件决定子组件的结构与外观-->
<span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
</template>
</Todo>
</div>
</template>
<script setup lang="ts">
import Todo from "./Todo.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>
