<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 讯享网
defineProps
讯享网
如下为子组件
父组件Father.vue中在调用Son.vue这个子组件时，使用v-bind绑定参数fatherMessage，并传给Son.vue
子组件Son.vue使用defineProps接收fatherMessage这个参数，而后就可以正常使用该参数。
props
讯享网
defineEmits
子组件传值给父组件主要是子组件通过defineEmits注册一个自定义事件，而后触发emit去调用该自定义事件，并传递参数给父组件。
在父组件中调用子组件时，通过v-on绑定一个函数，通过该函数获取传过来的值。
如下为子组件
讯享网
如下为父组件
父组件Father.vue中在调用Son.vue这个子组件时，当子组件Son.vue需要传参给父组件Father.vue时，使用defineEmits注册一个事件getValue，而后设置点击事件transValue去触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件。
emit
讯享网
讯享网
如下为父组件
在子组件中定义属性toFatherValue和方法toFatherMethod，而后通过defineExpose暴露出来。
父组件调用时，为子组件绑定一个ref，并定义一个ref变量sonMethodRef，通过调用sonMethodRef,来获取子组件暴露出来的属性和方法。
从上面的介绍里我们可以了解到父子组件之间的通信，但是却存在这样的情况：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：
虽然这里的 Footer 组件可能根本不关心这些 props，但为了使 DeepChild 能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。
provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
如下为父组件
讯享网
如下为子组件
如下为孙子组件
讯享网
当最顶层的组件Root.vue传值给所有子组件时，使用provide进行注入
1
而后无论哪个子组件想要获取toChildValue的值，只需使用inject即可
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/138666.html