欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-23 23:51:40
关于作用域插槽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 ......

关于作用域插槽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传到父级去,不就行了吗,的确是可以的:

 

问题出现

我们的页面有多个validate的情况下,需要搜集所有的error,那么我们可以用个数组:

<!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. 有死循环的问题。

问题解决

     我有一个解决方案(),希望大家不要先看我的方案,可能会影响了大家的思路,因为我感觉我的方案略显复杂。大家是否有更好的解决方案,欢迎评论中告知,多谢。。。