开篇:
今天在封装组件的时,涉及到了对插槽和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>