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)
    img

2.$attrs 和 useAttrs() 和 attrs

这三个都是一样的, 只不过写法不同 templatesetupdefineComponent
attrs: 该方法一般在子组件内使用, 可以传递绑定在子组件身上的属性与属性值,还可以获取自定义事件(函数);
也就是说 attrs 可以拿到父组件传递给子组件的所有 props;
但是, 如果在props内声明了某个属性, attrs就获取不到该属性了, propsattrs的优先级高
还有一个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>


如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
posted @   飞鸟和蝉-  阅读(180)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示