vue3 组件基础

基础
父传子
defineProps 是仅在 <script setup>
中可用的编译宏命令
1 | <script setup> |
子传父
defineEmits 是仅在 <script setup>
中可用的编译宏命令
1 | <script setup> |
slot 插槽
子组件:
1 | <template> |
父组件:
1 | <template> |
子组件渲染结果为:
1 | <template> |
子组件标签
子组件有关闭标签
父组件可以子组件传递 slot 内容
1 | <my-component></my-component> |
子组件无关闭标签
父组件无法向子组件传递 slot 内容
1 | <my-component /> |
动态组件
通过 component 组件,和 :is 属性切换动态组件
1 | <template> |
元素位置限制
某些元素对于放在其中的元素类型有限制:<ul>, <ol>, <table>, <select>
某些元素仅在特定元素中才会显示:<li>, <tr>, <option>
1 | <table> |
解决方案(使用 is 属性):
1 | <table> |
- Title: vue3 组件基础
- Author: Zoella
- Created at : 2023-12-11 18:35:48
- Updated at : 2023-12-26 11:20:49
- Link: https://zoella-w.github.io/2023/12/11/14-vue3组件基础/
- License: This work is licensed under CC BY-NC-SA 4.0.