如何在父级下访问v-slot的值——vuejs

时间 2019-11-25

标签如何访问 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%BDjavascript

如今咱们进入正题

咱们用到一个第三方组件validate，这个第三方组件的插槽传了一个属性error值给咱们，咱们如今想要在父级中得到这个error值, 为了简单起见，咱们建立一个validate组件做为测试。html

咱们以为能够在v-slot下使用一个方法，把error传到父级去，不就好了吗，的确是能够的： https://jsfiddle.net/jswenjie/pxru6y2m/5/vue

问题出现

咱们的页面有多个validate的状况下，须要搜集全部的error，那么咱们能够用个数组：https://jsfiddle.net/jswenjie/pxru6y2m/7/java

<!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），但愿你们不要先看个人方案，可能会影响了你们的思路，由于我感受个人方案略显复杂。你们是否有更好的解决方案，欢迎评论中告知，多谢。。。app