Vue自定义组件-事件使用

<!-- 组件 -->
<template>
  <button @click="btnClickEvent">
    <!-- 插件属性 -->
    <slot name="icon"></slot>
    <span>{{ msg }}</span>
  </button>
</template>

<script>
export default {
  props: {
    msg: {
      default: '下载'
    }
  },
  methods: {
    btnClickEvent: function () {
      // 执行统一事件
      console.log(this.msg)
      // 触发父组件自定义事件
      this.$emit('myClick')
    }
  }
}
</script>

组件使用

<template>
  <div id="myButton">
    <ex-btn v-on:myClick="doSth1" v-bind:msg="msg1"></ex-btn>
    <ex-btn v-on:myClick="doSth2" v-bind:msg="msg2"></ex-btn>
    <ex-btn v-on:myClick="doSth3" v-bind:msg="msg3">
      <img slot="icon" class="ico" src="@/assets/img/setting.png" />
    </ex-btn>
  </div>
</template>
<script>
import btn from '../../components/demo/button.vue'
export default {
  name: 'myButton',
  components: {
    'ex-btn': btn
  },
  data: function () {
    return { msg1: '变量1', msg2: '变量2', msg3: '变量3' }
  },
  methods: {
    doSth1: function () {
      console.log('方法1')
    },
    doSth2: function () {
      console.log('方法2')
    },
    doSth3: function () {
      console.log('方法3')
    }
  }
}
</script>