父组件
<template>
<div>
<!--<HelloWorld/>-->
<!--<Menu :menus="menus" :webSite="webSite" ></Menu>
<Menu :menus="menus" :webSite="webSite" @addMenu="addMenu"></Menu>-->
<Menu :menus="menus" :webSite="webSite" ref="menu" @addMenu="addMenu"></Menu>
</div>
</template>
<script>
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.213213com',
title:'J12312321'
}
}
},
methods:{
addMenu(menu){
console.log(menu)
this.menus.push(menu);
}
},
mounted () {
console.log('mounted')
this.$refs.menu.$on('addMenu',this.addMenu);
}
}
</script>
<style scoped>
</style>
子组件
<template>
<div>
<a :href="webSite.url" :title="webSite.title" target="_blank">
<img src="../assets/logo.jpg" height="74" width="216"/>
</a>
<ul>
<li v-for="(menu,index) in menus" :key="menu.id">
<a :href="'http://localhost:8080/menu/'+menu.id">{{menu.name}}</a>
</li>
</ul>
<input type="text" v-model="content">
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
name: 'Menu',
// 声明接收属性;这个属性就会成为组件对象的属性
props:['menus','webSite'],
data(){
return{
content:''
}
},
methods:{
add(){
const content=this.content.trim();
if(!content){
alert('菜单名称不能为空!');
return;
}
let menu={id:5,name:content}
this.$emit('addMenu',menu);
// this.addMenu(menu);
}
}
}
</script>
<style scoped>
ul li{
float:left;
padding-left: 5px;
list-style-type: none;
}
</style>