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>

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

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