js基本功七
目录
js基本功（七）
Symbol的用武之地
情况一
busA.vue
<template>
<div>
<button :style="{ color }" @click="busGo">click bus</button>
</div>
</template>
<script setup>
import { emitter } from '@/plugins/emitter';
import { onMounted, onBeforeUnmount, defineProps } from 'vue';
defineProps({
color: {
default: '',
type: String
}
});
const busName = 'busName'
const busGo = () => {
emitter.emit(busName);
};
onMounted(() => {
emitter.on(busName, () => {
console.log('I am bus ' + props.color);
});
});
onBeforeUnmount(() => {
emitter.off(busName);
});
</script>App.vue
<button
@click="
() => {
showA = !showA;
}
"
>
toggle bus
</button>
<BusA v-show="showA" color="red"></BusA>
<BusA v-show="!showA" color="blue"></BusA>
当点击蓝色时，红色会被触发；当点击红色时，蓝色会被触发。且不管怎么样，都是红色先触发，因为在App.vue中引入了红色和蓝色组件
情况二
const busName = Symbol();替换成这行代码
busA.vue
<template>
<div>
<button :style="{ color }" @click="busGo">click bus</button>
</div>
</template>
<script setup>
import { emitter } from '@/plugins/emitter';
import { onMounted, onBeforeUnmount, defineProps } from 'vue';
defineProps({
color: {
default: '',
type: String
}
});
const busName = Symbol();
const busGo = () => {
emitter.emit(busName);
};
onMounted(() => {
emitter.on(busName, () => {
console.log('I am bus ' + props.color);
});
});
onBeforeUnmount(() => {
emitter.off(busName);
});
</script>App.vue
<button
@click="
() => {
showA = !showA;
}
"
>
toggle bus
</button>
<BusA v-show="showA" color="red"></BusA>
<BusA v-show="!showA" color="blue"></BusA>点击红色就只会触发i am bus red;点击蓝色就只会触发i am bus blue。因为Symbol保证了事件的唯一性，symbol是独一无二的