Vue3 个人学习

1.组件 - 事件 - native

v2 => click.native == emits声明 <= v3

// demo.vue
<script setup lang="ts">
const emits = defineEmits(['click'])

const handerClick = () => {
    emits('click','组件内部click')
}
</script>

<template>
    <div @click="handerClick">点击</div>
</template>

// index.vue
<script setup lang="ts">
import Demo from '@/components/Demo/demo.vue'

const handerClick = (v) => {
    // emits声明
    // 组件内部click
    // emits未声明
    // 组件内部click
    // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, stopImmediatePropagation: ƒ, …}
    console.log(v);
}
</script>

<template>
    <Demo @click="handerClick"/>
</template>

2.组件 - 双向绑定 - 动态多项绑定

class & style & attribute

<script setup lang="ts">
import Demo from '@/components/Demo/demo.vue'

interface Demo {
    name: string,
    age: number,
    isClass: boolean,
    isNewClass: boolean,
    color: string,
    background: string
}

const demoBind:Demo = {
    name: '大锤',
    age: 18
}

const demoClass:Demo = {
  isClass: true,
  isNewClass: true
}

const demoStyle:Demo = {
  color:'#999',
  background: '#000'
}

const handerClick = (v) => {
    console.log(v);
}
</script>
<template>
    <!-- v2 -->
    <Demo @click="handerClick" 
    :class="{'isClass':demoClass.isClass,'isNewClass':demoClass.isNewClass}" 
    :style={color:demoStyle.color,bakcground:demoStyle.background} 
    :name="demoBind.name" :age="demoBind.age"/>
    <!-- v3 - 支持动态绑定多值 -->
    <Demo @click="handerClick" :class="demoClass" :style="demoStyle" v-bind="demoBind"/>
</template>