父传子
在父组件定义数据
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:"/*n"
},
{
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>