组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构。
定义一个组件:
<script setup> import { ref } from 'vue' const num= ref(0) </script> <template> <button @click="num++">数量 {{num}} </button> </template>
父组件中引用子组件:
<script setup> import ButtonCounter from '子组件路径' </script> <template> <ButtonCounter /> <ButtonCounter /> </template>
组件可以被重用任意多次.
父组件传递参数给子组件:
父组件:
父组件设置一个ref参数
通过bind 绑定该参数
子组件:
在setup 中通过 defineProps([]) 属性来获取传递的值。