vue3.0的父子通讯

最新推荐文章于 2024-04-25 10:48:28 发布

我血条呢

最新推荐文章于 2024-04-25 10:48:28 发布

阅读量507

点赞数

分类专栏： vue3.0 文章标签： java linux 前端

本文链接：https://blog.csdn.net/pasco152/article/details/121582650

版权

本文详细介绍了在Vue3.0中如何实现父组件向子组件传递数据以及子组件向父组件传递数据的方法，包括在App.vue和son.vue中的具体实现，并特别强调了使用emits的重要性，以避免出现警告。

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

一、父传子

App.vue

<template>
    <div class="countainer" style="display: flex">
        <h1>父组件</h1>
        <son :toSonData="toSonData" />
    </div>
</template>
<script>
import { ref } from 'vue'
import son from './components/son.vue'
export default {
    name: 'App',
    components: {
        son,
    },
    /**
     * 模板中需要的数据和函数，都从setuo里返回
     */
    setup() {
        // 父组件传给子组件的值
        const toSonData = ref(100);

        return { toSonData }; // 这里返回的是一个对象
    },
}
</script>

son.vue

<template>
    <div class="son">子组件</div>
    <div>{
  { toSonData }}</div>
</template>
<script>
export default {
    name: 'son',
    props: {
        // 可以定义一个初始类型
        toSonData: {