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("父組件數(shù)據(jù)");
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對象綁定到當(dāng)前標(biāo)簽</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改變時(shí)執(zhí)行
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 }">
    點(diǎn)擊切換我的文體顏色樣式
</button>

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

<button @click="changeColor2" :class="classObj">
          點(diǎn)擊切換顏色，根據(jù)計(jì)算屬性
</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對象綁定(直接綁定到一個(gè)對象，代碼更清新)</p>

     <p :style="[styleObj, styleObjRed]">style數(shù)組綁定</p>

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