18.Vue 自定义事件实现父子组件交互

  前面我们父组件通过传递方法对象，来实现子组件调用父组件，我们也可以通过自定义事件来实现；

  主要通过：this.$emit(‘myEvent’)

  我们修改下前面的案例：@addMenu=“addMenu” 绑定事件；

  因为我们去掉了 传值，所以Menu.vue子组件里 prop里去掉，以及this.addMenu
我们要改成 this.$emit(‘addMenu’,menu) 触发事件，效果一样；

<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"],
        data(){
            return {content:''}
        },
        methods:{
          add(){
            const content=this.content.trim();
            if(!content){
              alert('菜单名称不能为空')
              return
            }
            let menu={id:4,name:content}
            this.$emit('addMenu',menu)
          }
        }
    }
</script>

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

  还有一种方式，通过代码动态绑定自定义事件

  标签组件搞个ref引用；

  声明周期中有个mounted节点，当页面挂载完毕后，绑定下监听，也一样的效果 。就是繁琐点；

<template>
 <!--声明标签-->
  <Menu :menus="menus" :webSite="webSite" ref="menu"></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)
      }
    },
    mounted() {
      //绑定监听,$refs可以获取到所有的引用
      this.$refs.menu.$on('addMenu',this.addMenu)
    }
  }
</script>

<style scoped>
</style>