vue3【实用教程】组件（含父子组件传值 defineProps，自定义事件 defineEmits，defineProps，插槽 slot，动态组件 :is 等）

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">点击了 {{ count }} 次 </button>
</template>

import Child from './child.vue'

   components: {
    Child 
  }

<Child/>

<Child title="博客的标题" />

props: ['title']

emits: ['fav']

<button @click="$emit('fav')">喜欢</button>

<Child title="博客的标题" @fav="favNum++"  />

<Child>
你好
</Child>

<div>
    <h1>明天</h1>
    <slot />
</div>

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

<script setup>
import Child from './child.vue'
</script>

<template>
  <Child/>
</template>

<Child title="博客的标题" />

<script setup>
defineProps(['title'])
</script>

const props = defineProps(['title'])
console.log(props.title)

<script setup>
defineEmits(['fav'])
</script>

<button @click="$emit('fav')">喜欢</button>

<script setup>
const emit = defineEmits(['fav'])

emit('fav')
</script>

<Child title="博客的标题" @fav="favNum++"  />

<script setup>
const a = 1

defineExpose({
  a
})
</script>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child_ref = ref(null)

onMounted(() => {
  // 打印子组件中的变量 a
  console.log(child_ref.value.a)
})
</script>

<template>
  <Child ref="child_ref" />
</template>

<Child>
你好
</Child>

<div>
    <h1>明天</h1>
    <slot />
</div>

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>