VUE中父子组件交互

1.子组件暴露给父组件

新增子组件

<template>

  姓名：<input v-model="userName" /> <br />

  薪水：<input type="number" v-model="salary" /> <br />

</template>

<script lang="ts">

export default {

  name: 'myItermInfo',

}

</script>

<script setup lang="ts">

import { ref } from 'vue'

const userName = ref('小白')

const salary = ref(100)

defineExpose({

  userName,

  salary,

})

</script>

<style></style>

在父组件中使用：

<template>

  <div>

    <myItermInfo ref="itermInfo"></myItermInfo>

    <button @click="showItermInfo">查看项目信息</button>

  </div>

</template>

<script setup lang="ts">

import myItermInfo from './components/myItermInfo.vue'

import { ref } from 'vue'

const itermInfo = ref()

function showItermInfo() {

  console.log(itermInfo.value.userName)

}

</script>

2.父组件传给子组件

新增组件：myItermInfo.vue

<template>

  姓名：<input v-model="myItermInfo.userName" /> <br />

  薪水：<input type="number" v-model="myItermInfo.salary" /> <br />

  {{ myItermInfo }}

</template>

<script lang="ts">

export default {

  name: 'myItermInfo',

}

</script>

<script setup lang="ts">

import type { itermInfoFormat } from '@/types/itermInfo'

// defineProps(['myItermInfo'])

defineProps<{ myItermInfo: itermInfoFormat }>()

</script>

<style></style>

定义组件格式：itermInfo.ts

export interface ItermInfo {

  user: string

  salary: number

}

在主vue使用：

<template>

  <div>

    <myItermInfo :my-iterm-info="itermInfo"></myItermInfo>

    <button @click="showItermInfo">修改薪水</button>

  </div>

</template>

<script setup lang="ts">

import { reactive } from 'vue'

import myItermInfo from './components/myItermInfo.vue'

const itermInfo = reactive({ userName: '张三', salary: 10000 })

function showItermInfo() {

  itermInfo.salary += 10000

}

</script>