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>