vue3学习笔记-上手篇四

九.组合式API-defineProps()补充

补充，在上节中记录了defineProps()如何使用,以及它最终编译的样子就是vue2中的props,是用来父传子的。那如何将父组件响应式的数据传递给子组件呢？只要绑定响应式数据就可以了，如下代码：

//父组件
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template>
    <zzj
        message = "传给子组件"
        :count ="count"
    ></zzj>
</template>

====子组件=====

<script setup>
const props = defineProps({
    message:String,
    count:Number,
});
</script>
<template>
    <div>{{count}}</div>
</template>

那么defineProps()通常是用来父传子的，它能传给子组件多种类型的数据，也包括方法。只要父有什么本领，子只要申明一下就可调用了。看如下代码：

//父组件
<script setup>
const oc = (v)=>{
    console.log("子组件调用了父，还传了数据给父",v);
}
</script>
<template>
    <zzj
        message = "传给子组件"
        :oc = "oc"
    ></zzj>
</template>

====子组件=====

<script setup>
import { ref } from "vue";
const data = ref(null);

const props = defineProps({
    message:String,
    oc:Function,
});
const clickOC = ()=>{
    data ="我是子组件";
    props.oc(data);
};
</script>
<template>
    <button @click="clickOC" ></button>
</template>

这有意思了，通过绑定的形式，父传给子后，不但子能调用父，而且子还能传给父。冒似抢了defineEmits()的生意了。不过vue 中 还是推荐 defineEmits() 回调父函数比较好点，各司其职，各尽其责嘛。

总结：在vue3中，通过父绑定，子使用defineProps()申明，实现父子间通信。 通过父事先绑定 一个自定义事件，子使用defineEmits()声明，实现子传父通信。

注意：在vue2中还有一种不推荐使用的是$parent和$children。一个是直接访问父的，一个是直接访问子的。在vue3项目中$children已不再使用，$parent建议不使用，因为直接使用破坏了组件的封装性和复用性，而且组件间高耦合了。

当父调用子组件的方法和属性时，使用defineExprose()，在子组件中申明暴露的属性和方法，父通过ref获取。 通过这三个函数，父子间的通信，畅通无阻了。

十.组合式API-provide和inject

provide和inject的作用是跨层传递数据的。provide上层提供数据，inject下层获取数据。 使用两个步骤 顶层：privice('key',数据) 底层：const data = inject('key') 数据可以是普通数据，响应式数据和函数。如图：

A为顶层组件，B、E、F、G为底层组件。在A提供provice('key',数据)，在B、E、F、G都可使用inject('key')获取数据。若E传给G，就可轻松实现。若C中又提供了个provice()。那么E就无法和G通信了，因为E找到了C的provice后不在网上找了,而G的provice在A，所以这时E与G无法通信。 它可以使用在跨层数据传递。