vue3高阶用法一
1. v-model 和v-model:value为什么要的需要加:
- v-model
vue3中使用了modelValue
来代替了value
, 所以子组件触发emit的写法为emit('update:modelValue','xxx')
- v-model:value
为什么有的需要加:value,因为:后面接的是子组件触发的emit('update:value','xxx')
所以也就是说为什么vue3支持多个v-model:x1
,v-model:x2
- ant-design-vue 的a-input
使用的是emit('update:value',e.target.value)
2.$attrs 和 useAttrs() 和 attrs
这三个都是一样的, 只不过写法不同 template
和 setup
和 defineComponent
attrs: 该方法一般在子组件内使用, 可以传递绑定在子组件身上的属性与属性值,还可以获取自定义事件(函数);
也就是说 attrs
可以拿到父组件传递给子组件的所有 props
;
但是, 如果在props
内声明了某个属性, attrs
就获取不到该属性了, props
比 attrs
的优先级高
还有一个inheritAttrs
属性, 是否将 attrs
的属性绑定到 html
标签上
使用场景1:
A组件传递一个title给孙组件(当然可以直接使用provide / inject),这里只是为了介绍attrs
父组件
<template>
<div>我是父组件</div>
<hr />
<Child title="hello" data="123" @abc="handler" color="red"></Child>
</template>
<script setup>
import Child from "./Child.vue";
const handler = () => {
alert(666);
};
</script>
子组件
<template>
<div>我是子组件</div>
<hr />
<Son v-bind="$attrs"></Son>
</template>
<script setup>
import Son from "./Son.vue";
</script>
孙组件
<template>
<div>我是孙组件</div>
<hr />
<div></div>
<div></div>
<div></div>
</template>
<script setup>
defineProps(['title'])
</script>
如果Child子组件也需要使用title怎么办, 那么这个时候直接 使用 v-bind="$attrs" 孙组件会接收不到 title;因为子组件在props里面声明了 title
解决办法:
优化子组件中的 attrs
子组件
<template>
<div>我是子组件</div>
<hr />
<Son v-bind="bindProps"></Son>
</template>
<script setup>
import { computed,useAttrs } from 'vue';
import Son from "./Son.vue";
const props = defineProps({
title: String,
})
const attrs = useAttrs();
const bindProps = computed(() => Object.assign({
xxx:'----',// 这里还可以传递其他属性给孙组件,
}, props, attrs));
</script>
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix