ParentView.vue:
<script setup lang="ts">
import OneView from '@/views/values/OneView.vue'
import { ref } from 'vue'
import { message } from '@/hooks/native/message'
const counter = ref(1)
const mode = ref({
name: 'nameQQ'
})
const clickMe = () => {
message.info('clickMe')
counter.value++
mode.value.name = mode.value.name + counter.value
propName.value = mode.value.name
propObj.value.name = propObj.value.name + counter.value
}
const propName = ref('')
type PropObj = {
name: string
}
const propObj = ref<PropObj>({
name: 'nameXX'
})
</script>
<template>
<hr />
父亲组件
<n-input v-model:value="mode.name" />
{{ mode.name }}
<n-button @click="clickMe">点击</n-button>
<n-h3> propName.value: {{ propName }} ; propObj: {{ propObj }}</n-h3>
<hr />
<!-- :propName=propName-->
<OneView v-model:propName="propName" v-model:propObj="propObj" />
</template>
<style scoped></style>
自组件:
<script setup lang="ts">
import { reactive, ref } from 'vue'
const propName = defineModel('propName')
type PropObj = {
name: string
}
const propObj = defineModel<PropObj>('propObj', { required: true })
const clickMe = () => {
// props.propName = '子组件修改'
}
</script>
<template>
子组件
<n-h3>{{ propName }}</n-h3>
<n-input v-model:value="propName" />
<hr />
<n-h3>{{ propObj }}</n-h3>
// Vue: __VLS_ctx.propObj is possibly undefined
<n-input v-model:value="propObj.name" />
<n-button @click="clickMe">点击</n-button>
</template>
<style scoped></style>