方式一：

App.vue

<template>
  <div id="app">
 
    <!--  @btnClick="btnClick" 直接给子组件传入自定义的事件-->
   <me href="https://www.baidu.com" title="百度一下" content="百度" @btnClick="btnClick"/>
    <me href="https://www.jd.com" title="京东" content="京东商城" @btnClick="btnClick"/>
    <me href="https://www.taobao.com" title="淘宝" content="淘宝网" @btnClick="btnClick"/>
 
  
  </div>
</template>
<script>
 
import me from './components/Menu'
export default {
  name: 'App',
  components: {
    me
  },
  methods:{
    btnClick(msg){
      console.log(msg);
    }
  },
  
 
}
</script>
 
<style scoped>
 
</style>

Menu.vue

<template>
  <div>
     <p>
       菜单项：
     <a :href="href" :title='title' target="_blank">{{content}}</a>
       <button @click="doClick">按钮</button>
 
     </p>
  </div>
</template>
 
<script>
export default {
  name: 'mu',
  data () {
    return {
 
    }
  },
  methods:{
    doClick(){
       console.log('do click');
 
      //当父容器是使用@btnClick动态传入的自定义事件(此时props中也无须定义需要接收的事件了)，则需要这么调用
      //使用编程式方式直接触发事件
      this.$emit('btnClick','aaaa');
    }
  },
  //props表示可以从外部(父组件)传入的属性，
  // props中定义的属性可以作为元素自身的data和method属性来使用
  props:['href','title','content']
}
</script>
 
<style scoped>
 
</style>

方式二：

App.vue

<template>
  <div id="app">
    <!-- refs编程式绑定自定义事件 -->
    <me href="https://www.baidu.com" title="百度一下" content="百度" ref="m1"/>
    <me href="https://www.jd.com" title="京东" content="京东商城"   ref="m2"/>
    <me href="https://www.taobao.com" title="淘宝" content="淘宝网"  ref="m3"/>
  </div>
</template>
<script>
 
import me from './components/Menu'
export default {
  name: 'App',
  components: {
    me
  },
  methods:{
    btnClick(msg){
      console.log(msg);
    }
  },
  mounted(){
     this.$refs.m1.$on('btnClick',this.btnClick);
     this.$refs.m2.$on('btnClick',this.btnClick);
     this.$refs.m3.$on('btnClick',this.btnClick);
  }
 
}
</script>
 
<style scoped>
 
</style>

Menu.vue

template>
  <div>
     <p>
       菜单项：
     <a :href="href" :title='title' target="_blank">{{content}}</a>
       <button @click="doClick">按钮</button>
 
     </p>
  </div>
</template>
 
<script>
export default {
  name: 'mu',
  data () {
    return {
 
    }
  },
  methods:{
    doClick(){
       console.log('do click');
 
      //当父容器是使用@btnClick动态传入的自定义事件(此时props中也无须定义需要接收的事件了)，则需要这么调用
      //使用编程式方式直接触发事件
      this.$emit('btnClick','aaaa');
    }
  },
  //props表示可以从外部(父组件)传入的属性，
  // props中定义的属性可以作为元素自身的data和method属性来使用
 
  props:['href','title','content']
}
</script>
 
<style scoped>
 
</style>