vue3 引用组件 父组件传递参数给子组件

组件允许我们将 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([]) 属性来获取传递的值。

 

 

效果演示：