ai问答：使用 Vue3 组合式API 和 TS 父子组件共享数据

这是一个使用 Vue3 组合式 API 和 TypeScript 的简单父子组件共享数据示例

父组件 Parent.vue：

<template>
  <div>
    <p>{{ msg }}</p>
    <Child />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  components: { Child },
  setup() {
    const msg = ref('Hello from Parent!')
    return { msg }
  }
}
</script>

子组件 Child.vue:

<template>
  <div>
    <p>Hello, my name is {{ name }}</p>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    return { name }
  }
}
</script>

父组件通过components属性注册子组件,并在模板中使用；子组件有自己的状态和数据逻辑。

两者之间的通信方式有：

1. 父传子：通过子组件的props接收父组件传递的数据

修改父组件:

<template>
    <div class="parent">
        <p>{{ msg }}</p>
        <Child :text="text"/>
    </div>
</template>

<script lang="ts">
import {ref} from 'vue'
import Child from '@/components/Child.vue'

export default {
    components: {Child},
    setup() {
        const msg = ref('Hello from Parent!')
        const text = ref('some text')
        return {msg, text}
    }
}
</script>

<style>
.parent {
    background-color: #ffffff;
}
</style>

修改子组件:

<template>
    <div class="child">
        <p>Hello, my name is {{ name }}</p>
        <p>{{ text }}</p>
    </div>
</template>

<script lang="ts">
import {ref} from 'vue'

export default {
    props: {
        text: String
    },
    setup(props: { text: string }) {
        console.log(props)
        const name = ref('John')
        return {name}
    }
}
</script>

<style>
.child {
    background-color: #ffffff;
}
</style>

然后在子组件模板使用{{ text }}接收，也可以在setup中使用props

1. 子传父：通过自定义事件@change，获取子组件传参

修改父组件：

<template>
    <div class="parent">
        <p>{{ msg }}</p>
        <Child :text="text" @change="onChange"/>
        <p>{{childText}}</p>
    </div>
</template>

<script lang="ts">
import {ref} from 'vue'
import Child from '@/components/Child.vue'

export default {
    components: {Child},
    setup(props: any, {expose}: any) {
        const msg = ref('Hello from Parent!')
        const text = ref('some text')
        const childText = ref("")

        const onChange = (text: string) => {
            childText.value = text;
        }

        return {msg, text, childText, onChange}
    }
}
</script>

<style>
.parent {
    background-color: #ffffff;
}
</style>

修改子组件：

<template>
    <div class="child">
        <p>Hello, my name is {{ name }}</p>
        <p>{{ text }}</p>
    </div>
</template>

<script lang="ts">
import {ref} from 'vue'

export default {
    props: {
        text: String
    },
    emits: ['update'],
    setup(props: { text: string }, {emit}: any) {
        console.log(props);
        const name = ref('John')
        emit('change', 'emit change')

        return {name}
    }
}
</script>

<style>
.child {
    background-color: #ffffff;
}
</style>

在子组件中调用emit('change', 'emit change')就可以触发父组件的方法。