前端队长の技术博客

  1. 各自特点
  2. vue官方建议
  3. JSX语法如何在vue中使用
  4. template和jsx混用

各自特点

template

JSX

vue官方建议

Vue官方建议使用template模板,但是 :

“更抽象一点来看,我们可以把组件区分为两类:一类是偏视图表现的 (presentational),一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板,在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化,但整体来说我们发现表现类的组件远远多于逻辑类组件。”

也就是说,在一些特定场景下可以建议使用JSX语法。

JSX语法如何在vue中使用

先看下template的情况

<!--nav-tmpl.vue-->
<template>
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</template>
<script>
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  }
};
</script>

是不是很多v-if-else 看的眼花缭乱?

别着急,来看jsx大法。

// nav-jsx.jsx
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  },
  render: function(h) {
    const Tag = `h${this.level}`;
    return <Tag>{this.$slots.default}</Tag>;
  }
};

是不是简洁了许多?!

jsx组件使用的方式和vue组件相同,先导入,然后components注册,就可以使用了。

<template>
  <div class="demo">
    <Nav :level="2">标题</Nav>
    <navjsx :level="1">标题</navjsx>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
import navjsx from "@/components/nav.jsx";
export default {
  components: { Nav,navjsx },
  data() {
    return {}
  }
};

template和jsx混用

我们也可以混用template和jsx语法。通过在components中注册一个函数式组件,渲染jsx语法的标签。

<template>
  <div class="demo">
    <Nav :level="2"></Nav>
    <navjsx :level="1"></navjsx>
    <VNodes :vnodes="showJSX(1)" />
  </div>
</template>

<script>
import Button from "@/components/Button.vue";
import Nav from "@/components/Nav.vue";
import navjsx from "@/components/nav.jsx";
export default {
  components: {
    Button,Nav,navjsx,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data() {
    return {
      title: "标题",
    };
  },
  methods: {
      showJSX(level) {
          const Tag = `h${level}`;
          return <Tag>{this.title}</Tag>;
      }
  },
</script>

(完)