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>