java 位置父组件中心_通过 Prop 实现父子组件数据传递

通过 Prop 实现父子组件数据传递

父子组件之间传递数据，我们先讲一种最简单最常用的 Prop声明方式；

我们搞个 App父组件，然后 Menu作为子组件，App父组件向Menu子组件传值；

我们在父组件App里向Menu子组件传递菜单对象数组menus以及网站信息webSite对象；

import Menu from './components/Menu'  // 引入组件

export default {

name: 'App',

components:{

Menu  // 映射组件标签

},

data(){

return {

menus:[

{

id:1,

name:'科技'

},

{

id:2,

name:'文化'

},

{

id:3,

name:'政治'

},

{

id:4,

name:'娱乐'

}

],

webSite:{

url:'http://www.java1234.com',

title:'Java知识分享网'

}

}

}

}

下面是Menu.vue

• {{menu.name}}

export default {

name: 'Content',

// 声明接收属性：这个属性就会成为组件对象的属性

props:['menus','webSite']

}

ul li{

float:left;

padding-left: 5px;

list-style-type: none;

}

运行效果：