vue3 父组件向子组件传值，子组件向父组件传值

最新推荐文章于 2024-08-02 09:29:40 发布

叮当猫咪呀

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量2.3k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/fggfgf/article/details/124846890

版权

本文详细介绍了在Vue.js中如何进行父子组件之间的数据传递。首先展示了父组件如何通过props将数据`msg`传给子组件，然后阐述了子组件如何通过触发自定义事件`clickParent`将值回传给父组件，并在父组件中更新相应的状态。示例代码详尽，涵盖了直接和间接调用事件的方式。

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

一.父向子传递参数

1）父组件

<template>
    <div>
        <!-- info.msg 父组件向子组件传递的参数 -->
        <son-component :msgTitme="info.msg"></son-component>
    </div>
</template>
<script>
import SonComponent from "./SonComponent.vue"
import { reactive } from "vue";
export default {
    components:{ SonComponent },
    setup() {
        const info = reactive({ 
            msg:'hello world'
        })
        return {
            info
        }
    }
}
</script>

2）子组件

<template>
    <div>
        子组件 - {{ msgTitme }}
    </div>
</template>
<script>
export default {
    props: {
        msgTitme:String
    }
</script>

二. 子组件向父组件传值

1)父组件

<template>
    <div>
        <!-- clickParent 自定义方法(子组件向父组件传值需要的方法)  -->
        <son-component  @clickParent="clickParent"></son-component>
        <!-- info.options 父组件接收子组件的值 -->
        <div>子向父传递的参数 - {{ info.options }} </div>
    </div>
</template>
<script>
import SonComponent from "./SonComponent.vue"
import { reactive } from "vue";
export default {
    components:{ SonComponent },
    setup() {
        const info = reactive({ 
            msg:'hello world',
            options:'' 
        })
        const clickParent = ( value )=>{
            // value 子组件传过来的值
            info.options = value
        }
        return {
            info,
            clickParent
        }
    }
}
</script>

2）子组件

<template>
    <div>
        <el-button @click="$emit('clickParent',info.msg)">直接调用</el-button>
        <el-button @click="isClickParent">间接调用</el-button>
    </div>
</template>
<script>
import { reactive } from "vue";
export default {
    props: {
        msgTitme:String
    },
    // emits:['clickParent'],
    emits: {
        clickParent: (value) => {
            if (value) {
                return true
            } else {
                return false
            }
        }
    },
    setup(props, { emit }) {
        const info = reactive({ msg: 'hello 我是子传参数'})
        const isClickParent = () =>{
            emit('clickParent', info.msg )
        }
        return { 
            info,
            isClickParent
        }
    },
}
</script>