vue中rander函数使用

vue中除了有template模板渲染还有render函数渲染，其实template中也是用的render函数渲染

 

 render函数简单使用实例

1定义一个button.vue文件：

<script>
export default {
  props: {
    type: {
      type: String,
      default: "normal",
    },
    text: {
      type: String,
    },
  },
  render(h) {
    //h为creatElement()
    return h("button", {
      class: {
        btn: true,
        btn_sucess: this.type === "sucess",
        btn_error: this.type === "error",
        normal: this.type === "normal",
      },
      domProps: {
        innerText: this.text || "默认按钮",
      },
      on: {
        //点击方法
      },
    });
  },
};
</script>

<style>
.btn {
  width: 100px;
  height: 40px;
  color: #fff;
  transition: all 0.5s;
}
.btn_sucess {
  background-color: green;
}
.btn_error {
  background-color: red;
}
.normal {
  background-color: yellow;
}
</style>

 

2使用：

2.1y引入组件

import Button from "../../../public/common/emement/Button";

2.2使用组件

 <Button :type="type" :text="text"></Button>

type定义类型，text定义按钮内容