vue如何使用jsx编写函数式组件？

文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。

注意: 如果是手动搭建的项目，需要通过安装插件才可使用JSX。

vue如何使用jsx编写

1.创建Test.jsx文件

export default {
  render() {
    return (
      <div>
        <p>vue 使用 jsx</p>
      </div>
    );
  },
};

如此就是最简易版的.jsx文件了

2.插值

在JSX中使用{}来绑定内容

export default {
  data() {
    return {
      val: "这里进行变量存储",
    };
  },
  render() {
    const { val } = this;
    return (
      <div>
        <p>vue 使用 jsx</p>
        {val}
      </div>
    );
  },
};

建议的写法就是在render中解构出来data里的变量，正文里使用即可。

当然，也可直接调用，方法如下：

<p>{this.val}</p>

3.遍历渲染 、 条件渲染

export default {
  data() {
    return {
      val: "这里进行变量存储",
      list: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "张四",
        },
        {
          id: 3,
          name: "张五",
        },
        {
          id: 4,
          name: "张六",
        },
      ],
      isShow: true,
    };
  },
  render() {
    const { val, list, isShow } = this;
    return (
      <div>
        <p>vue 使用 jsx</p>
        {/* 插值 */}
        {val}

        <ul>
          {/* 遍历渲染 */}
          {list.map((item, index) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>

        {/* 条件渲染 */}
        {/* 1. &&  */}
        {isShow && <div>这里是条件渲染</div>}

        {/* 2. 三元运算 */}
        {isShow ? "条件为真显示内容" : "条件为假显示内容"}
      </div>
    );
  },
};

jsx中没有v-if和v-for。
条件渲染使用&&或者 三元运算
遍历渲染使用 .map
注意： map的返回值需要是一个标签，且为唯一根标签形式的。遍历出的标签，建议添加key

4. jsx样式添加

推荐使用scss
使用如下:

1.新建styld.scss文件
可根据需求自行编写

.container{
    border: 1px dotted red;
    color: red;
}
ul{
    li{
        line-height: 44px;
        border-bottom: 1px dotted gold;
    }
}

2.在当前.jsx内引入使用

import './styled.scss' // 引入外部样式
export default {
  data() {
    return {
      val: "这里进行变量存储",
      list: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "张四",
        },
        {
          id: 3,
          name: "张五",
        },
        {
          id: 4,
          name: "张六",
        },
      ],
      isShow: true,
    };
  },
  render() {
    const { val, list, isShow } = this;
    return (
    // 添加class 此处与react不一样，不需使用className，因为在react中class为关键字
      <div class='container'>
        <p>vue 使用 jsx</p>
        {/* 插值 */}
        {val}

        <ul>
          {/* 遍历渲染 */}
          {list.map((item, index) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>

        {/* 条件渲染 */}
        {/* 1. &&  */}
        {isShow && <div>这里是条件渲染</div>}

        {/* 2. 三元运算 */}
        {isShow ? "条件为真显示内容" : "条件为假显示内容"}
      </div>
    );
  },
};

5. 使用自定义组件

当组件仅需要展示，而不需要进行其他操作时，不用维护状态，可使用 functional进行标识，性能会好很多

1.创建组件
Child1.jsx
// 仅进行展示

export default {
  functional: true,
  render(h, content) {
    console.log("content", content);
    return <div>这里是子组件，展示的内容为：{content.props.val}</div>;
  },
};

注意： 函数式组件是没有this的。所有的内容都在render的第二个参数里

Child2.jsx
// 调用父组件方法，修改child1显示的内容

export default {
  functional: true,
  render(h, content) {
    return (
      <div>
        <p>这里是子组件2</p>
        {/* 绑定事件 需要加on */}
        {/* 调用父组件方法 也是在 content里进行调用，因为没有this*/}
        <button onClick={() => content.listeners.parent()}>
          click me,调用父组件方法
        </button>
      </div>
    );
  },
};

2.父组件使用

import "./styled.scss";
import Child1 from "./Child1";
import Child2 from "./Child2";
export default {
  components: ["Child1", "Child2"],
  data() {
    return {
      val: "这里进行变量存储",
      list: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "张四",
        },
        {
          id: 3,
          name: "张五",
        },
        {
          id: 4,
          name: "张六",
        },
      ],
      isShow: true,
      childMsg: "父组件传递给子组件的内容",
    };
  },
  methods: {
    // 定一个一个方法，修改数据
    changeMsg() {
      this.childMsg = "点击了child2，修改了child1的内容";
    },
  },
  render() {
    const { val, list, isShow, childMsg } = this;
    return (
      // 添加class 此处与react不一样，不需使用className
      <div class="container">
        <p>vue 使用 jsx</p>
        {/* 插值 */}
        {val}

        <ul>
          {/* 遍历渲染 */}
          {list.map((item, index) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>

        {/* 条件渲染 */}
        {/* 1. &&  */}
        {isShow && <div>这里是条件渲染</div>}

        {/* 2. 三元运算 */}
        {isShow ? "条件为真显示内容" : "条件为假显示内容"}

        {/* 调用子组件 */}
        {/* child1 仅仅展示数据 */}
        <Child1 val={childMsg} />

        {/* Child2 调用父组件方法 */}
        {/* 注意： 此处使用on绑定方法parent，子组件只需调用parent方法 */}
        <Child2 onparent={() => this.changeMsg()} />
      </div>
    );
  },
};

jsx组件内content的内容有很多，简单说一哈:

children        # VNode数组，类似于React的children
data          # 绑定的属性
    attrs       # Attribute
    domProps    # DOM property
    on                # 事件
injections  # 注入的对象
listeners:  # 绑定的事件类型
    click         # 点击事件
    ...
parent            # 父组件
props                # 属性
scopedSlots # 对象，作用域插槽，使用中发现作用域插槽也挂在这个下面
slots                # 函数，插槽

如此就可进行业务代码简单的编写了。。。