VUE3+TS(父子组件v-model共享值共享对象，传参传对象)

最新推荐文章于 2024-06-18 09:00:43 发布

航迹者

最新推荐文章于 2024-06-18 09:00:43 发布

阅读量375

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42390636/article/details/137064539

版权

本文详细介绍了在Vue应用中使用TS编写的ParentView.vue组件，展示了父子组件间的交互以及如何通过`ref`和`v-model`实现数据双向绑定。

摘要由CSDN通过智能技术生成

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>