Vue 组件通信 $attrs、$listeners

Nomal_1bit

已于 2022-08-01 17:28:50 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端 elementui

于 2022-04-10 18:30:52 首次发布

本文链接：https://blog.csdn.net/m0_57547956/article/details/124083001

版权

API — Vue.js 官方文档介绍

个人认为这个传参方式用于二次封装一些ui库的组件非常好用，下面是代码示范。

子组件 -> tipsButton

<!--
 * @Author: WenBin
 * @Date: 2022-04-10 18:01:46
 * @LastEditTime: 2022-04-10 18:15:59
 * @LastEditors: your name
 * @Description: 
 * @FilePath: \vue-admin-template\src\components\tipsButton\index.vue
-->
<template>
  <a style="margin:10px" :title="title">
    <el-button v-bind="$attrs" v-on="$listeners">
      <slot></slot>
    </el-button>
  </a>
</template>

<script>
export default {
  // 组件名称
  name: 'tipsButton',
  // 组件参数 接收来自父组件的数据
  props: { 
      title:{
          type:String,
          default:""
      }
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {}
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
  created() {
  },
  mounted() {
  },
}
</script> 

<style scoped lang="scss"> 
</style>

父组件使用->

    <tips-button @click="myClick(row)" title="添加Spu" type="success" icon="el-icon-plus" size="mini"></tips-button>
              <tips-button title="修改Spu" type="warning" icon="el-icon-edit" size="mini"></tips-button>
              <tips-button title="查看当前spu全部sku列表" type="info" icon="el-icon-info" size="mini"></tips-button>
              <tips-button title="删除spu" type="danger" icon="el-icon-delete" size="mini"></tips-button>

//并且因为写了$listeners 所以可以直接在组件上写@click事件 就可以和el-button一样，不需要再去写自定义事件