阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue render 函数之 JSX 应用

      render 函数之 JSX 应用

      一。模板缺陷

      模板的最大特点是扩展难度大,不易扩展。可能会造成逻辑冗余,

      比如做一个 H1-H6 的小组件

      <Level :type="1">哈哈</Level>
      <Level :type="2">哈哈</Level>
      <Level :type="3">哈哈</Level>
      

      Level 组件需要对不同的 type 产生不同的标签

      <template>
       <h1 v-if="type==1">
        <slot></slot>
       </h1>
       <h2 v-else-if="type==2">
        <slot></slot>
       </h2>
       <h3 v-else-if="type==3">
        <slot></slot>
       </h3>
      </template>
      <script>
      export default {
       props: {
        type: {
         type: Number
        }
       }
      };
      </script>
      

      二。函数式组件

      函数式组件没有模板,只允许提供 render 函数

      可以把复杂的逻辑变得非常简单

      export default {
       render(h) {
        return h("h" + this.type, {}, this.$slots.default);
       },
       props: {
        type: {
         type: Number
        }
       }
      };
      

      三。JSX 应用

      使用 jsx 会让代码看起来更加简洁易于读取

      上面的组件可以下面这样写

      export default {
       render(h) {
        const tag = "h" + this.type;
        return <tag>{this.$slots.default}</tag>;
       },
       props: {
        type: {
         type: Number
        }
       }
      };
      

      四。render 方法订制组件

      编写 List 组件可以根据用户传入的数据自动循环列表

      五。scope-slot

      六。编写可编辑表格

      目录
      本文目录
      目录