vue3 的组件通信以及ref的使用&v-model
Posted 面条请不要欺负汉堡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3 的组件通信以及ref的使用&v-model相关的知识，希望对你有一定的参考价值。
一. 组件通信
1. props=>父向子传值
props主要用于父组件向子组件通信。在父组件中通过用 :msg=“msg” 绑定需要传给子组件的属性值，然后再在子组件中用 props 接收该属性值。
方法一 普通方式：
// 父组件 传值
<child :msg1="msg1" :list="list"></child>
<script>
import child from "./child.vue";
import ref, reactive from "vue";
export default
setup()
//基础类型传值
const msg1 = ref("父组件传给子组件的msg1");
// 复杂类型（数组或对象）传值
const list = reactive(['苹果', '梨', '香蕉'])
return
msg1,
list
</script>
// 子组件 接收
<template>
<ul >
<li v-for="i in list" :key="i"> i </li>
</ul>
</template>
<script>
export default
// props接受父组件传过来的值
props: ["msg1", "list"],
setup(props)
console.log(props);
// msg1:"父组件传给子组件的msg1", list:['苹果', '梨', '香蕉']
,
</script>
方法二：使用 setup 语法糖
// 父组件 传值
<child :msg="msg" :list="list">
</child>
<script setup>
import child from "./child.vue";
const list = reactive(['苹果', '梨', '香蕉'])
const msg = ref("父组件传给子组件的值");
</script>
// 子组件 接收
<template>
<ul >
<li v-for="i in list" :key="i"> i </li>
</ul>
</template>
<script setup>
// 这里不需要在从vue中引入defineProps，直接用
const props = defineProps(
// 第一种写法
msg: String,
// 第二种写法
list:
type: Array,
default: () => [],
)
console.log(props);
</script>
2.emit方式=>子向父传值
$emit 也就是通过自定义事件传值，主要用于子组件向父组件通信。
在子组件的点击事件中，通过触发父组件中的自定义事件，把想传给父组件的信息以参数的形式带过去，父组件便可以拿到子组件传过来的参数值。
// 子组件 派发
<template>
<button @click="handleClick">按钮</button>
</template>
<script setup>
let infos = ref('还好');
const handleClick = () =>
// 触发父组件中的方法，并把值以参数的形式传过去
emit('myClick', infos);
;
const emit = defineEmits(['myClick']);
</script>
// 父组件 接收
<template>
<child @myClick="onMyClick"></child>
</template>
<script setup>
import child from "./child.vue";
// 父组件接受到子组件传过来的值
const onMyClick = (msg) =>
console.log(msg);
</script>
3.expose / ref=》父获取子得属性或方法
expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。
<template>
<div>父组件：拿到子组件的message数据： msg </div>
<button @click="callChildFn">调用子组件的方法</button>
<hr />
<Child ref="com" />
</template>
<script setup>
import Child from './child.vue';
const com = ref(null); // 通过 模板ref 绑定子组件
const msg = ref('');
onMounted(() =>
// 在加载完成后，将子组件的 message 赋值给 msg
msg.value = com.value.message;
);
function callChildFn()
console.log(com.value, '====');
// 调用子组件的 changeMessage 方法
com.value.show();
// 重新将 子组件的message 赋值给 msg
msg.value = com.value.message;
</script>
子组件：
<template>
<div> 子组件：</div>
</template>
<script setup>
const message = ref('子组件传递得信息');
const show = () =>
console.log('子组件得方法');
;
defineExpose(
message,
show,
);
</script>
4.attrs
attrs 主要用于子组件获取父组件中没有通过 props 接收的属性。
<template>
<Child :msg1="msg1" :msg2="msg2" title="子组件" />
</template>
<script setup>
import Child from './child.vue';
const msg1 = ref('信息1');
const msg2 = ref('信息2');
</script>
子组件
<template>
<div> 子组件： msg1 - attrs.msg2 - attrs.title </div>
</template>
<script setup>
// 子组件接收msg1
defineProps(
msg1: String,
);
const attrs = useAttrs();
// 因为子组件接收了msg1，所以打印的结果中不会包含msg1, msg2:"信息1", title: "子组件"
// 如果子组件没有接收msg1，打印的结果就是 msg1: "信息1", msg2:"信息12", title: "子组件"
console.log(attrs);
</script>
5. provide / inject
遇到多层传值时，使用 props 和 emit 的方式会显得比较笨拙。这时就可以用 provide 和 inject 了。
provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。
provide：在父组件中可以通过 provide 提供需要向后代组件传送的信息。
inject：从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。
<template>
<div>------祖父组件---------</div>
<button @click="fn">改变location的值</button>
<br />
<div>双向数据绑定：</div>
姓名 userInfos.username ：
<input v-model="userInfos.username" />
<Child />
</template>
<script setup>
import Child from './child.vue';
let location = ref('传递祖父的参数');
var userInfos = reactive(
username: '张三',
age: 20,
);
let fn = () =>
location.value = '改变值';
;
provide('location', location);
provide('userInfos', readonly(userInfos));
</script>
子组件：
<template>
<div>
<Sun />
</div>
</template>
<script>
import Sun from "./sun.vue";
</script>
孙组件：
<template>
<div>
<h5>-------------孙组件接受参数-------------</h5>
<div>1.祖父组件定义provide，孙组件inject接受： location </div>
<p>用户信息： userInfos.username </p>
<br />
<br />
<div>2.provide inject实现父子组件传值的时候，子组件改变数据也会影响父组件</div>
<br />姓名：
<input v-model="userInfos.username" />
</div>
</template>
<script setup>
let location = inject('location');
let userInfos = inject('userInfos');
</script>
注意：增加readonly后，子组件修改后，不会影响到父组件
类型安全的provide/inject
使用vue 提供的injectionKey 类型工具来再不同的上下文中共享类型
context。ts
import InjectionKey, Ref from 'vue'
export interface SetUser
name: string
age: number
// 函数的的InjectionKey
export const setUserKey: InjectionKey<SetUser> = Symbol()
父组件
<script setup>
import setUserKey from './context'
provide(setUserKey ,
name: 'Karen', //如果输入1，那么类型就会报错
age: 20
)
</script>
子组件
<script setup>
import setUserKey from './context'
const user =inject(setUserKey)// 输出SetUser | undefined
if(user)
console.log(user.name)//Karen
</script>
6.readonly
获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理,不能给属性重新赋值。只读代理是递归的：访问的任何嵌套 property 也是只读的。
简单得理解：要确保父组件传递得数据不会被子孙组件更改时，增加readonly
7.v-model
v-model 是 Vue 的一个语法糖。在 Vue3 中的玩法就更多了
单个 v-model 绑定
<template>
<Child v-model="message" />
</template>
<script setup>
import Child from './child.vue';
const message = ref('父传给子');
</script>
子组件：
<template>
<div>
<button @click="handleClick">修改model</button>
modelValue
</div>
</template>
<script setup>
// 接收
defineProps([
'modelValue', // 接收父组件使用 v-model 传进来的值，必须用 modelValue 这个名字来接收
]);
const emit = defineEmits(['update:modelValue']); // 必须用 update:modelValue 这个名字来通知父组件修改值
function handleClick()
// 参数1：通知父组件修改值的方法名
// 参数2：要修改的值
emit('update:modelValue', '子改变值');
</script>
多个 v-model 绑定
<template>
<Child v-model:msg1="message1" v-model:msg2="message2" />
</template>
<script setup>
import Child from './child.vue';
const message1 = ref('水果1');
const message2 = ref('水果2');
</script>
子组件：
<template>
<div>
<div><button @click="changeMsg1">修改msg1</button> msg1 </div>
<div><button @click="changeMsg2">修改msg2</button> msg2 </div>
</div>
</template>
<script setup>
// 接收
defineProps(
msg1: String,
msg2: String,
);
const emit = defineEmits(['update:msg1', 'update:msg2']);
function changeMsg1()
emit('update:msg1', '蔬菜1');
function changeMsg2()
emit('update:msg2', '蔬菜2');
</script>
v-model 修饰符
v-model 还能通过 . 的方式传入修饰。v-model 有内置修饰符——.trim、.number 和 .lazy。但是，在某些情况下，你可能还需要添加自己的自定义修饰符。
<template>
<Child v-model.uppercasefn="message" />
</template>
<script setup>
import Child from './child.vue';
const message = ref('水果');
</script>
子组件：
<template>
<div>
<div> modelValue </div>
</div>
</template>
<script setup>
const props = defineProps(['modelValue', 'modelModifiers']);
const emit = defineEmits(['update:modelValue']);
onMounted(() =>
console.log(props.modelModifiers, '自定义v-model 修饰符');
// 判断有没有uppercasefn修饰符，有的话就执行 下面得方法 方法
if (props.modelModifiers.uppercasefn)
emit('update:modelValue', '蔬菜');
);
</script>
8.插槽 slot
插槽可以理解为传一段 html 片段给子组件。子组件将 元素作为承载分发内容的出口。
默认插槽
插槽的基础用法非常简单，只需在 子组件 中使用 标签，就会将父组件传进来的 HTML 内容渲染出来。
<template>
<Child>
<div>渲染</div>
</Child>
</template>
子组件：
// Child.vue
<template>
<div>
<slot></slot>
</div>
</template>
具名插槽
具名插槽 就是在 默认插槽 的基础上进行分类，可以理解为对号入座。
<template>
<Child>
<template v-slot:monkey>
<div>渲染</div>
</template>
<button>按钮</button>
</Child>
</template>
子组件：
<template>
<div>
<!-- 默认插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="monkey"></slot>
</div>
</template>
父组件需要使用 标签，并在标签上使用 v-solt: + 名称 。子组件需要在 标签里用 name= 名称 对应接收。
作用域插槽
<template>
<!-- v-slot="scope" 获取子组件传上来的数据 -->
<!-- :list="list" 把list传给子组件 -->
<Child v-slot=" scope " :list="list">
<div>
<div> scope.name --职业： scope.occupation </div>
<hr />
</div>
</Child>
</template>
<script setup>
import Child from './child.vue';
const list = reactive([
name: '鲁班', occupation: '辅助' ,
name: '貂蝉', occupation: '刺客和法师' ,
name: '虞姬', occupation: '射手' ,
]);
</script>
子组件：
<template>
<div>
<!-- 用 :scope="item" 返回每一项 -->
<slot v-for="item in list" :scope="item"></slot>
</div>
</template>
<script setup>
defineProps(
list:
type: Array,
default: () => [],
,
);
</script>
9.事件总线(mitt&tiny-emitter)
Vue3中移除了事件总线，但是可以借助于第三方工具来完成，Vue官方推荐mitt或tiny-emitter；
在大多数情况下不推荐使用全局事件总线的方式来实现组件通信，虽然比较简单粗暴,但是长久来说维护事件总线是一个大难题。
mitt
mitt.js 不是专门给 Vue 服务的，但 Vue 可以利用 mitt.js 做跨组件通信。(vue3去掉了 o n 、 on、 on、off后，使用mitt第三方库替代eventBus的原理。)
比起 Vue 实例上的 EventBus，mitt.js 好在哪里呢？
- 首先它足够小，仅有200bytes。
- 其次支持全部事件的监听和批量移除。
- 它还不依赖 Vue 实例，可以跨框架使用，React 或者Vue，甚至 jQuery 项目都能使用同一套库。
npm install --save mitt
父组件：
<template>
<div>
<Home />
<Mitt/>
<div>
</template>
<script >
import Home from "@/views/home.vue";
import Mitt from "@/views/mitt.vue";
</script >
emiter.js
// mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象
import mitt from 'mitt'
const emiter = mitt()
export default emiter
子组件Home：
<template>
<div>
<p>这里是home组件</p>
<button @click="sendHomeContent">$mitt发送数据</button>
</div>
</template>
<script>
import reffrom 'vue'
import emitter from "./../model/emitter.js";
export default
setup(props,ctx)
const money = ref(98);
var sendHomeContent=()=>
// emit发送信息
emitter.emit("moneyEvent",money.value += 2);// 触发自定义总线moneyEvent，并传入一个对象 。
return
sendHomeContent
;
</script>
子组件 Mitt：
<template>
<div>
<p>这里是Mitt组件</p>
<p>接收到的数据： amount </p>
</div>
</template>
import ref, onUnmounted, onMounted from 'vue';
import emitter from "../model/event";
export default
setup(props,ctx)
const amount = ref(0);
const callback = (res) =>
if (res)
amount.value = res;
onMounted(() =>
//DOM挂载完毕
emitter.on('moneyEvent', callback );
)
onUnmounted(() =>
//销毁完毕
emitter.off('moneyEvent',callback );
);
return
amount
;
总结：
emit 发送信息
on 接收信息
off 取消监听
清除所有的事件写法
emitter.all.clear()
10.状态管理工具
Vuex和Pinia是Vue3中的状态管理工具，使用这两个工具可以轻松实现组件通信。
Pinia 是最近比较火热的一个工具，也是用来处理 跨组件通信 的，极大可能成为 Vuex 5
二. 细节
1.Vue3中的ref如何使用？v-for有如何使用ref？
Vue2 中的 ref
获取节点：这是 ref 的基本功能之一，目的就是获取元素节点，在 Vue 中使用方式也很简单
<template以上是关于vue3 的组件通信以及ref的使用&v-model的主要内容，如果未能解决你的问题，请参考以下文章
「 VUE3 + TS + Vite 」父子组件间如何通信？