使用$attrs和$listeners属性封装button按钮组件

MyButton.vue

<template>
  <div>
    <!-- 外层包裹a标签实现title效果 -->
    <a :title="$attrs.title">
      <!-- 使用v-bind="$attrs"和v-on="$listeners"绑定父组件传递过来的属性和自定义事件 -->
      <el-button v-bind="$attrs" v-on="$listeners">{{ $attrs.txt }}</el-button>
    </a>
  </div>
</template>

<script>
export default {};
</script>

App.vue

<template>
  <div>
    <MyButton
      type="success"
      size="mini"
      title="这是一个按钮"
      txt="anniu"
      @click="handle"
    />
  </div>
</template>

<script>
import MyButton from "./components/MyButton";

export default {
  components: { MyButton },
  methods: {
    handle() {
      console.log(666666);
    },
  },
};
</script>

页面效果实现鼠标悬停提示