vue v-bind=“$attrs“、v-on=“$listeners“-阿里云开发者社区

vue v-bind=“$attrs“、v-on=“$listeners“

2023-07-10 103

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue v-bind=“$attrs“、v-on=“$listeners“

一、背景

在封装组件时候，经常要传递参数，调用事件。我们希望把主导权放在业务组件内，这是引入我们今天的主题： v-bind="$attrs" 、v-on="$listeners"

使用 v-bind="$attrs" 属性，vm.$attrs 是一个属性，其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。这些未识别的属性可以通过 v-bind="$attrs" 传入内部组件。未识别的事件可通过v-on="$listeners"传入。

二、代码：

// 业务代码
<template>
  <div class="container">
    <div>
      <el-button @click="showDialog" type="primary" style="margin:50px;">show-dialog</el-button>
      <test-dialog
        top="8vh"
        width="85%"
        :title="'dialog-title'"
        :visible.sync="dialogVisible"
        :footer-visible="true"
        @refuse="handleClose"
        @confirm="handleConfirm"
        @closeBtn="handleClose"
      >
        <template #content>
          <div>
            content
          </div>
        </template>
      </test-dialog>
    </div>
  </div>
</template>
<script>
import TestDialog from "./components/dialog.vue";
export default {
  components: {
    TestDialog
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog(){
      console.log('hide')
      this.dialogVisible = true
    },
    handleClose() {
      console.log('close')
      this.dialogVisible = false;
    },
    handleConfirm() {
      console.log('success')
    },
  }
};
</script>

// 组件代码
<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      ref="mDialog"
      :visible="$attrs.visible || instanceVisible"
      :width="'500px'"
      :show-close="false"
      v-on="$listeners"
    >
      <div slot="title" class="dialog--title">
        <span>{{ $attrs.title || "提示" }}</span>
        <span class="dialog--title__close" @click="close">
          <i class="el-icon-close"></i>
        </span>
      </div>
      <div class="content">
        <slot name="content" />
      </div>
      <div slot="footer">
        <div>
          <el-button refuse="true" plain @click="refuse">{{
            $attrs["refuse-text"] || "取消"
          }}</el-button>
          <el-button type="primary" @click="confirm">{{
            $attrs["confirm-text"] || "确定"
          }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { throttle } from "lodash";
export default {
  name: "Dialog",
  inheritAttrs: false,
  data() {
    return {
      instanceVisible: false,
    }
  },
  methods: {
    close() {
      this.$listeners.closeBtn();
    },
    refuse: throttle(
      function func() {
        this.$listeners.refuse();
      },
      1500
    ),
    confirm: throttle(
      function func() {
        this.$listeners.confirm();
      },
      1500
    )
  }
}
</script>
<style lang="less">
.dialog--title {
  font-size: 18px;
  line-height: 24px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
  .dialog--title__close:hover {
    cursor: pointer;
  }
}
</style>