代码之家  ›  专栏  ›  技术社区  ›  Pat

在vue.js 2.6.0中,用slot scope定义的slotprops不适用于v-if

  •  2
  • Pat  · 技术社区  · 5 年前

    我刚从2.5.21更新到vue.js 2.6.0,我的一些页面停止工作。

    最终我发现问题在于:

    Vue.component('foo' , {
        data : function() { return { a : 42 /*this is computed dynamically in real life*/ } } ,
        template : `<div><slot v-bind:a="a">Default Text</slot></div>`
    });
    

    我就这样使用它

    <foo><template  slot-scope="slotProps" v-if="slotProps.a==42"> Fourty two</template></foo>
    

    基本上,我只想在a为42时使用传递的模板,否则保留默认值。

    使用vue.js v 2.5.21,当a为42时,我得到“fourdy two”,否则得到“default text”。

    使用Vue.js v 2.6.0,我会得到一个错误

    Property or method "slotProps" is not defined on the instance but referenced during render.
    

    这是Vue 2.6.0中引入的回归,还是我使用它不正确,但由于2.5.21中的错误,它按我预期的方式工作? 在后一种情况下,根据a的值有条件地使用不同模板的建议方法是什么?

    PS:我知道我最终应该转向使用v-slot,但2.6.0不应该破坏向后兼容性。

    1 回复  |  直到 5 年前
        1
  •  1
  •   Husam Ibrahim    5 年前

    这确实是由 this commit . 幸好一小时前在 version 2.6.2 .

    Vue.component('foo', {
      data: function() {
        return {
          a: 42 /*this is computed dynamically in real life*/
        }
      },
      template: `<div><slot v-bind:a="a">Default Text</slot></div>`
    });
    
    new Vue({
      el: '#app',
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"></script>
    
    <div id="app">
      <foo><template slot-scope="slotProps" v-if="slotProps.a==42"> Fourty two</template></foo>
    </div>