VUE[初级] 通过prop实现父子组件传值

本节内容

通过prop实现父子组件传值

– 需求 创建导航连接 可通过ul li 方式实现
– 效果如下图

• 静态导航菜单
  – 直接固定值
  

动态导航菜单

– 值是动态获取然后拼接到li列表中的

1. 创建Menu.vue 在src/components下

2. Menu.vue中配置映射组件

<script>
export default {
  name: 'Menu'
}
</script>

3. App.vue中修改导入组件为Menu并添加模拟数据

– App.vue相对于Menu.vue是父组件 需要将App组件中的值传递到Menu中
– 要想将父组件的值传递到子组件中还需要在父组件中对应的映射标签中添加声明
– 具体如下

<template>
<div>
  <!-- 声明menus属性 这样就可以将该属性对应的数据传递到子组件中 子组件中通过props声明后就可以使用了-->
  <Menu :menus="menus"/>
</div>