vue的父传子 与子传父

父传子

在父组件定义数据

const ShuJu = reactive({
    one:'Basic 基础组件',
    two:'配置组件',
    there:'Form 表单组件',
    foru:'Data 数据展示',
    five:'Navigation 导航',
    sex:'Others 其他',
    serve:'Others 其他'
})

在父组件中的子组件
– ShuJu为定义的数据，如果传递一个默认值或者变量就这样子做：message=“ShuJu”，少了个 ：
– ShuJu为固定的参数

	<CeBian :message="ShuJu"/>

在子组件 CeBian.vue

props:["message"],

模板中使用

<div>{{message.one}}</div>

子传父

主要是setup中参数： context

<template>
    <div>
        <p>子向父传递数据</p>
        <el-button @click="User">点击我显示导航栏</el-button>
    </div>
</template>
<script>
import { reactive } from 'vue'
export default {
    setup(props,context){
        const shuju = reactive([
            {
                title:"指南",
                Path:"/zhinan"
            },
            {
                title:"组件",
                Path:"/zujian"
            },
            {
                title:"资源",
                Path:"/ziyuan"
            },
            {
                title:"团队",
                Path:"/tuandui"
            }
        ])
        function User(){
        	// 通过 context.emit 传递
            context.emit('clickFu',shuju)
        }
        return{
            User
        }
    }
}
</script>
<style lang="less" scoped>

</style>

父组件

<User @clickFu="User"/>

Nav.abc 是定义数据接受的变量

const Nav = reactive({
    abc:[]
})

const User = (data)=>{
    Nav.abc = data
    console.log( Nav.abc);
}

在模板中使用,通过v-for循环 出来数据

<router-link v-for="(item,index) in abc" :key="index" :to="item.Path">
    {{item.title}}
</router-link>

标签：vue,const,title,组件,abc,传父,context,与子,Nav
来源： https://blog.csdn.net/weixin_46212682/article/details/121859676