vue中父组件传递数据及方法给子组件

父组件

<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>