vue中的slot和v-show和v-if有什么区别?可以互相替代吗?

vue中的slot和v-show和v-if有什么区别?可以互相替代吗?

阅读 487
评论 3月9日提问
    5 个回答

    v-if 表示这个节点可能不存在,v-show 表示这个节点可能不显示,当然不能互相替代。

    评论 赞赏

      我理解 slot 和 v-if 虽然有时候可以实现类似的功能,但这两个在组件设计上的理念上是完全不一样的。

      • v-if 和 v-show 是把显示内容的判断放在组件内部,也就是不管这个内容是否显示,这部分代码和逻辑判断都在组件里面存在。这种适合组件内部逻辑状态使用,比如按钮是否显示之类的。
      • 而 slot 是把显示的内容以及显示与否交给了父级组件,更适合一些通用组件使用,比如弹窗之类的。这样组件就可以与业务解耦,业务部分的内容可以父级通过 slot 传递进来。

      虽然用 v-if 和 v-show 理论上也能实现一个弹窗组件,无非就是在弹窗增加场景时在内部不断增加判断,但这样的话这个组件就与业务耦合太严重,而且很难维护。

      评论 赞赏
        fengxh
        • 579

        不能互相替代,但是可能在视觉上你觉得是一样的效果。
        v-show是使用css的display属性来打到切换一个元素显示的效果,v-if是控制dom节点是否在html文档上来达到该效果的。
        理论上来说,如果一个元素频繁切换显示,最好使用v-show。
        v-if可以让你严格根据某些数据来控制页面上节点的渲染,比如根据某个类型来渲染某个组件(你不可能需要全部组件的创建以及他们的切换)

        评论 赞赏

          v-if是控制dom节点,v-show是通过display:none来控制显示与否,在dom树上依然存在。
          至于slot和上面两者的区别就大了去了,比如你在A组件里有一个slot插槽,你在这个插槽里放B组件,放C组件,放D组件,可以不放组件,显然这是v-ifv-show做不到的(除非写一大串的条件)。
          建议你仔细阅读官方文档,你提出的问题,文档里其实都有说明。

          评论 赞赏

            不可以相互替代。

            v-show是dom元素已经渲染出来了,只是有没有展示出来,v-if是能控制dom元素是否渲染。
            v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
            v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

            评论 赞赏
              撰写回答

              登录后参与交流、获取后续更新提醒