Vue3基础知识：组合式API下的父传子,defineProps是什么？如何使用和原理？组合是api下的子传父，defineEmit是什么？如何使用？以及案例演示

1.组合式API下的父传子

1.基本思想

1.父组件中的子组件绑定属性

2.子组件内部通过props选项接收（如果存在setup语法糖，则用编译器宏）

1.父传子

2.效果图：

 

 那么这个defineProps到底是什么呢，它的原理是什么呢？

defineProps:编译器宏，其实就是编译阶段的一个标识，实际编译器解析时，遇到它就会进行编译转换，转化为vue2中所见的props

3.总结：

1.组件中通过defineProps来接收props,语法为

defineProps({属性名：类型})

2.setup语法糖中使用

const props=defineProps({属性名：类型})

props.xxx

2.组合是api下的子传父

基本思想

1.父组件中给子组件标签通过@绑定事件

2.子组件内部通过emit方式触发事件（当然因为vue3中没有this,所以需要通过defineEmits编译器宏生成emit方法）

1.子传父

2.效果图：

 3.总结：

子传父的过程中通过defineEmit(['事件名称'])得到emit方法

通过emit('自定义事件名'，参数)

4.最后附上源代码：

父组件App.vue：

<script setup>

//父传子

//1.给子组件，添加属性的方式传值

//2.在子组件中，通过props接收

//在vue3中不需要再进行，注册导入进来就可以直接用。


// 子传父

// 1.在子组件内部，emit触发事件(通过编译器宏获取)
//2.在父组件中通过@监听
import Son from './components/Son.vue';
import {ref} from 'vue'
const number=ref(520)

const addNumber=()=>{
  number.value+=1
}
const changeFn=(newNumber)=>{
number.value=newNumber
}
</script>


<template>
  <div>
    <h3>父组件---{{number}}
    <button @click="addNumber">+数量</button>

    </h3>
    <!-- 给子组件以添加属性的方式传值 -->
    <Son toSonMessage="我是给子组件的数据"
     :number="number"
      @changeNumber="changeFn"></Son>
  </div>
</template>



<style scoped>

</style>

 

子组件Son.vue

 

<script setup>
//注意：由于写了setup。所以无法直接配置props选项
//所以，此处需要借助“编译器宏”函数接收子组件传递的数据

const props=defineProps({
    toSonMessage:String,
    number:Number
})

console.log(props.toSonMessage)

const emit=defineEmits(['changeNumber'])
const decNumber=()=>{
    //通过emit触发事件
    emit('changeNumber',5)
}
</script>


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

    <div class="son">
        <button @click="decNumber">减数量</button>
        我是子组件---{{ toSonMessage }}--数量：--{{ number }}
    </div>
</template>


<style scoped>
.son{
    border:1px solid #000;
    padding: 30px;
}
</style>