vue3 通过props动态绑定事件以及class

开篇：

        今天在封装组件的时，涉及到了对插槽和props的使用，因为该组件涉及到多处使用到了，有些使用处需要绑定一些事件，有的则不用（固然全部都绑上，不监听不就完了嘛，但是我们实际上可以通过props来控制该事件的绑定）

方案1：动态参数(好处就是事件可以动态的绑定)

        另二种写法，以下的写法太挤了

                1.v-on="prependDraggable && !disabled ? { mousedown: onPrependMouseDown } : {}"

                2.v-on="{ mousedown: prependDraggable && !disabled ? onPrependMouseDown : null }"

<v-col
  :class="disableResend? 'p-text-body-2 p-text-quaternary': 'p-text-body-2 p-text-quaternary p-text-medium-2'"
  @[appendClick?`click`:null]="emits('appendClick')"
></v-col>

const props = defineProps({
  appendClick: {
    type: Boolean,
    default: false,
  },
  disableResend: {
    type: Boolean,
    default: false,
  },
});

方案2:利用useAttrs实现（不推荐，它不利于我们后续的代码可读性,后续可能不明白为什么它就触发了这个事件,明明里面没有emit）

// 父组件
<template>
    <appendClick name='月亮' @appendClick="senLog"></appendClick>
</template>

// 子组件
<template>
  <div class="append-click-box" @click="attrs.onAppendClick">
  </div>
</template>

<script setup>
import {  useAttrs} from 'vue'
const attrs = useAttrs()
</script>

结论:attrs可以获取到你传入的props和自定义事件

注意点:1.如果这个props已经被defineProps,或者defineEmits接收了,那attrs将无法获取到

             2.在attrs中获取到的事件,将会自动带上前缀on

方案3:直接在子组件中,通过emit的方式触发(代码逻辑交给调用者去处理)

// 父组件
<appendClick @appendClick="senLog"></appendClick>
// 子组件
<template>
  <div class="append-click-box" @click="emist('appendClick')">
  </div>
</template>

<script setup>
const emist = defineEmits('appendClick')
</script>

多个class类绑定

<template>
  <!--可以在class中进行判断-->
  <div :class="[zzz,{'p-btn-toggle--shadow': true }]">
  </div>
</template>

<script setup>
    import { ref } from 'vue';
    // 这可以替换为计算属性
    const zzz = ref('className');
</script>