17.Vue 父子组件方法传递及回调

  开发的时候经常会遇到子组件需要调用父组件方法，来实现业务逻辑；

  这时候我们常用的方式是父组件直接传一个方法给子组件，然后子组件调用父组件传来的方法；

  改造下前面的案例，App.vue增加一个新增菜单 addMenu 方法，这个方法最终要在子组件调用：

<template>
 <!--声明标签-->
  <Menu :menus="menus" :webSite="webSite" :addMenu="addMenu"></Menu>
</template>

<script>
  import Menu from './components/Menu'  // 引入组件
  export default {
    name: 'App',
    components:{
      Menu:Menu  // 映射组件标签，ES6中属性名和属性值相同可以省略属性值只写属性名
    },
    data(){
      return { //定义菜单的对象数组,将其传递给子组件
        menus:[{id:1,name:'科技'},{id:2,name:'文化'},{id:3,name:'政治'}],
        webSite:{url:'https://cn.vuejs.org/',title:'Vue.js官网'}
      }
    },
    methods:{
      addMenu(menu){
        this.menus.push(menu)
      }
    }
  }
</script>

<style scoped>
</style>

  子组件声明接收，调用

<template>
  <div>
    <a :href="webSite.url" :title="webSite.title">
    <img src="../assets/logo.png" height="74" width="216"/>
    </a>
    <ul>
      <li v-for="(menu,index) in menus":key="menu.id">
        <a :href="'http://localhost:8080/meun/'+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","addMenu"],
        data(){
            return {content:''}
        },
        methods:{
          add(){
            const content=this.content.trim();
            if(!content){
              alert('菜单名称不能为空')
              return
            }
            let menu={id:4,name:content}
            this.addMenu(menu);
          }
        }
    }
</script>

<style scoped>
  ul li{
    float: left;
    padding-left: 5px;
    list-style-type: none;
  }
</style>