选项式 API
定义组件
在一个单独的 .vue 文件中定义
child.vue
<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
通过 props 选项声明子组件可以接收数据的属性名
props: ['title']
此时 title 便成为子组件实例的一个新增的属性，可像使用 data 中定义的数据一样，使用 title
子组件添加自定义事件 emits
通过 emits 选项声明子组件自定义的事件名
emits: ['fav']
触发自定义事件
<button @click="$emit('fav')">喜欢</button>
父组件监听子组件的自定义事件
<Child title="博客的标题" @fav="favNum++" />
插槽 slot
父组件
<Child> 你好 </Child>
子组件
<div> <h1>明天</h1> <slot /> </div>
动态组件
<!-- currentTab 改变时组件也改变 --> <component :is="currentTab"></component>
currentTab 的值为 被注册的组件名 或 导入的组件对象
应用场景：在多个组件间来回切换，比如 Tab 界面
组合式 API
定义组件
在一个单独的 .vue 文件中定义
child.vue
<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="博客的标题" />
子组件接收父组件的传值 defineProps
defineProps 无需导入，可直接使用
<script setup> defineProps(['title']) </script>
defineProps() 返回包含所有 props 的对象
const props = defineProps(['title']) console.log(props.title)
子组件添加自定义事件 defineEmits
defineEmits 无需导入，可直接使用
<script setup> defineEmits(['fav']) </script>
触发自定义事件
<button @click="$emit('fav')">喜欢</button>
defineEmits() 返回一个等同于 $emit 方法的 emit 函数
<script setup> const emit = defineEmits(['fav']) emit('fav') </script>
父组件监听子组件的自定义事件
<Child title="博客的标题" @fav="favNum++" />
子组件对外暴露数据 defineExpose
子组件 Child.vue 中
<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>
插槽 slot
父组件
<Child> 你好 </Child>
子组件
<div> <h1>明天</h1> <slot /> </div>
动态组件
<!-- currentTab 改变时组件也改变 --> <component :is="currentTab"></component>
currentTab 的值为 被注册的组件名 或 导入的组件对象
应用场景：在多个组件间来回切换，比如 Tab 界面
