当前位置：首页 > article >正文

v-bind,v-on与简写:和@有什么区别?

article 2024/11/20 17:20:13

对于vue项目来说，用的比较多的就是简写的:和@，但是v-bind,v-on与简写的:和@是有区别的

对于用来二次重写element-ui的组件来说，就需要使用v-bind和v-on，
因为:v-bind和v-on可以直接传递一个对象到子组件中，子组件可以使用$attrs接受

  <date-picker
    ref="dom"
    v-bind="{...$props,...$attrs}"
    v-on="{...$listeners,input}"
  >
    <slot />
  </date-picker>

例：

<template>
    <custom-table
        ref="dom"
        v-bind="{ ...$props, ...$attrs }"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
        v-on="$listeners"
    >
        <slot />
    </custom-table>
</template>

<script>
/**
 1. $attrs 从父组件中传入的所有属性的集合(不包含class和style,ref)
 2. $props 当前组件中定义的props属性
 3. $listeners 从父组件中传入的所有的事件监听(不包含.native的事件)
 4. <slot/> 这个不是为了重构提供的属性,但是我们调用某个组件若是需要插槽的话,还是需要继续以插槽的形式向下探
 */
import { Table as CustomTable } from 'element-ui'
export default {
    components: {
        CustomTable,
    },
    props: {
        stripe: {
            type: Boolean,
            default() {
                return true
            },
        },
        border: {
            type: Boolean,
            default() {
                return true
            },
        },
    },
    mounted() {
        this.$emit('forward-ref', this.$refs.dom)
    },
}
</script>

代码见githab
https://github.com/li1164267803/test-demo

总结

重写与重构的区别?

重写是在原有的基础上进行扩展，添加私有属性与方法，不丢失原有的属性与方法，重构是相当于改别人的源代码，能重写就不要重构

如何重写?

通过vue的全局注册组件，将前面引入的element组件进行覆盖，在重写的组件中引入原来的element组件，通过 $a tt r,$ props,$listener获取父组件的方法和属性v-bind传递到element组件中，这只是做到了不丢失原有属性和方法，然后通过props添加私有属性进行添加默认值，如果父组件没有传递值，则使用默认值，有值将值传递到element组件