vue.js父子组件方法传递及回调

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

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

改造下前面的案例：

父组件App.vue；

methods:{

  addMenu(menu){

this.menus.push(menu)

  }

}

搞一个添加菜单的方法

<Menu :menus="menus" :webSite="webSite" :addMenu="addMenu"></Menu>

直接传递方法

子组件要申明下接收：

 props:['menus','webSite','addMenu'],

Menu.vue子组件 定义一个content变量 然后 搞个Input和 Button. 点击按钮调用add方法；

add(){

const content=this.content.trim();

if(!content){

  alert("菜名名称不能空！");

  return;

}

let menu={id:5,name:content};

this.addMenu(menu)

}

先验证，然后调用父组件方法addMenu即可；

这样就实现了菜单添加功能；