组合式API下的父传子和子传父

 

目录

父传子

传固定值

传入响应式数据

子传父

---

父传子

1. 父组件中给子组件绑定属性
2. 子组件内部通过 props 选项接收

• 传固定值

<script setup>

//局部组件（导入进来就能用）
import SonCom from '路径'

</script>



<template>
    <div>
        <h3>父组件</h3>
         <!-- 给子组件，添加属性的方式传值 -->
         <SonCom sport="跑步"></SonCom>
    </div>
</template>

<script>
//子组件
//defineProps接收

const props = defineProps({
    sport: String
})
</script>

<template>
    <!-- 对于props传递过来的数据，模版中可以直接使用 -->
    <div>{{ sport }}</div>
</template>

• 传入响应式数据

<script setup>
//父组件

import {ref} from 'vue'
//局部组件（导入进来就能用）
import SonCom from '路径'

const num = ref(10)
const getAdd = () => {
    num.value += 1
}
</script>



<template>
    <div>
        {{ num }}
        <button @click="getAdd">加速</button>

        <!-- 给子组件，添加属性的方式传值 -->

         <SonCom sport="跑步" :add="add"></SonCom>
    </div>
</template>

 

<script>
//子组件
//defineProps接收

const props = defineProps({
    sport: String,
    num:Number
})
</script>

<template>
    <!-- 对于props传递过来的数据，模版中可以直接使用 -->
    <div>{{ sport }} --- {{ num }}</div>
</template>

子传父

1. 父组件中给子组件标签通过@绑定事件
2. 子组件内部通过 emit 方法触发事件

<script>
//子组件

……

const emit = defineEmits(['change'])

const cut = () => {
    // 触发自定义事件，并传递参数
    emit('change',2)
}

……

</script>

<template>
    <!-- 对于props传递过来的数据，模版中可以直接使用 -->
    <div>{{ sport }} --- {{ num }}
        
        <button>减速</button>

    </div>
</template>

<script setup>
//父组件

……

const changeFn = (newCut) => {
    num.value = newCut
}

……

</script>



<template>
    <div>
        {{ num }}
        <button @click="getAdd">加速</button>

        <!-- 给子组件，添加属性的方式传值 -->

         <SonCom @change = "changeFn" sport="跑步" :num="num"></SonCom>
    </div>
</template>