[JavaScript知识库] 使用$attrs和$listeners属性封装button按钮组件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 使用$attrs和$listeners属性封装button按钮组件 -> 正文阅读

[JavaScript知识库]使用$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>

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