如何在父级下访问v-slot的值——vuejs
Posted 杰的记事本——javascript.shop
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在父级下访问v-slot的值——vuejs相关的知识，希望对你有一定的参考价值。
关于作用域插槽v-slot的用法可以先看看文档
https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD
现在我们进入正题
我们用到一个第三方组件validate，这个第三方组件的插槽传了一个属性error值给我们，我们现在想要在父级中获得这个error值, 为了简单起见，我们创建一个validate组件作为测试。
我们觉得可以在v-slot下使用一个方法，把error传到父级去，不就行了吗，的确是可以的： https://jsfiddle.net/jswenjie/pxru6y2m/5/
问题出现
我们的页面有多个validate的情况下，需要搜集所有的error，那么我们可以用个数组：https://jsfiddle.net/jswenjie/pxru6y2m/7/
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cn.vuejs.org/js/vue.js"></script> </head> <body> <div id="app"> <validate v-for="x in 2" :key="x" v-slot="{ error }"> in scope {{ error }} {{ sendToParent(error, x-1) }} </validate> <div>in parent {{ error }}</div> </div> <script> // validate为第三方组件不允许修改 Vue.component("validate", { data() { return { error: "" }; }, mounted: function() { setInterval(() => (this.error = Date.now()), 1000); }, template: ‘<div><slot :error="error" /></div>‘ }); new Vue({ el: "#app", data() { return { error: [] }; }, methods: { sendToParent(error, index) { this.$set(this.error, index, error); } } }); </script> </body> </html>
我们发现虽然结果是正确的，不过在控制台下出现了warning警告，[Vue warn]: You may have an infinite update loop in a component render function. 有死循环的问题。
问题解决
我有一个解决方案（https://javascript.shop/2019/11/get-slot-prop-in-parent-by-v-slot），希望大家不要先看我的方案，可能会影响了大家的思路，因为我感觉我的方案略显复杂。大家是否有更好的解决方案，欢迎评论中告知，多谢。。。
以上是关于如何在父级下访问v-slot的值——vuejs的主要内容，如果未能解决你的问题，请参考以下文章