vue3组件化开发常用API知识点总结

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

<p> $props: {{$props}} </p>

const props = defineProps({
  num: Number,
})

<button @click="$emit('add')">
  add
</button>

<button @click="add">{{ num }}</button>

const emits = defineEmits(['add'])
function add() {
  emits('add')
}

const parData = ref("父组件数据");
defineExpose({
  parData,
})

<p>父组件 parData: {{$parent.parData}}</p>

<Foo a="a" b="b" :num="num" @add="add" />

<Bar :age=18 sex="boy" />

<p v-bind="$attrs">将$attrs对象绑定到当前标签</p>

import { useAttrs } from 'vue';

const attrs = useAttrs();
console.log(attrs.sex); // boy

provide("user", "kong");
provide("pass", 123456);

const user = inject("user");
const pass = inject("pass");

<template>
  <div :style="s1">
    <slot name="head"></slot>
  </div>
  <div :style="s2">
    <slot name="foot"></slot>
  </div>
</template>

          <SlotComp>
            <template v-slot:head>
              <p>head插槽</p>
            </template>
            <template v-slot:foot>
              <p>foot插槽</p>
            </template>
          </SlotComp>

            <template v-slot:foot>
              <p>foot插槽</p>
              {{msg}}
              {{items}}
            </template>

<slot name="head" :item="items"></slot>

            <template v-slot:head = "slotProps">
              <p v-for="i in slotProps.item">{{i}}</p>
            </template>

<input v-model="text" />

const msg = ref('hello world!');

<ModelComp v-model="msg"></ModelComp>

          <ModelComp 
            :modelValue="msg"
             @update:modelValue="msg = $event"
          >
          </ModelComp>

const props = defineProps({
  modelValue: String
})
const emits = defineEmits([
  "update:modelValue"
])

const text = ref("请输入..");

// text改变时执行
watch(text,()=>{
  emits("update:modelValue",text.value);
})

<ModelComp v-model:show="show"></ModelComp>

          <ModelComp 
            :show="showFlag"
             @update:show="showFlag = $event"
          >
          </ModelComp>

const props = defineProps({
  show: Boolean
})
const emits = defineEmits([
  "update:show",
])

<button @click="changeColor" :class="{ active: isActive }">
    点击切换我的文体颜色样式
</button>

const isActive = ref(false);
const changeColor = () => {
  isActive.value = !isActive.value;
}

<button @click="changeColor2" :class="classObj">
          点击切换颜色，根据计算属性
</button>

const isActive2 = reactive({
active: false,
})
const classObj = computed(() => {
return {
  active: isActive2.active,
  'font-30': true,
}
})
const changeColor2 = () => {
isActive2.active = !isActive2.active
}

<div :class="[activeClass, errorClass]"></div>

<div :class="[isActive ? activeClass : '', errorClass]"></div>

<div :class="[{ active: isActive }, errorClass]"></div>

      <p :style="{ color: colorRed }">style绑定</p>

      <p :style="styleObj">style对象绑定(直接绑定到一个对象，代码更清新)</p>

     <p :style="[styleObj, styleObjRed]">style数组绑定</p>

const colorRed = ref('#f00')
const styleObj = reactive({
  fontSize: '30px',
})
const styleObjRed = reactive({
  color: '#f00',
})