Vue3 自定义组件传参

父组件

1
2
3
4
5
6
7
8
9
<template>
  <HelloWor v-model:aaa="foo" />
  {{foo}}
</template>
<script setup>
import HelloWor from './Hello.vue'
import{ref}from 'vue'
const foo=ref()
</script>

子组件

1
2
3
4
5
6
7
8
9
10
11
<template>
  <input v-model="yyy" />
</template>
<script setup>
import{useAttrs,computed}from 'vue'
const attrs = useAttrs()
const emit = defineEmits(['update:aaa'])//v-model父传子必须要用emit声明,否则父的v-model修饰符会不起作用。
const yyy=computed({
get() {return attrs.aaa},
set(newV) {emit('update:aaa',newV)}})
</script>

refer to:
https://segmentfault.com/a/1190000044885561