vue3中使用render函数

1:vue3中需要从vue中先引入h

import { h } from "vue";

2:定义render函数

const renderButton = {
  render: () => {
    return h(
      // 1. 要渲染的标签名称:第一个参数【必需】
      "button",
      // 2. 渲染标签的属性:第二个参数【可选】
      {
        style: {
          color: "#333",
          border: "1px solid #ccc",
        },
        class: "",
        id: "",
        onClick: changeNum,
      },
      // 3. 渲染标签的子元素数组:第三个参数【可选】
      [
        // "render函数文本" 文本内容可以直接写入
        h("p", num.value), // h()创建的VNodes
      ]
    );
  },
};

let num = ref(0);  // vue3中需要使用ref或reactive声明变量,否则无法实现双向数据绑定
const changeNum = () => {
    num.value++    // 改变ref定义的变量值需要使用.value , reactive不需要 
}

// 未使用setup语法糖时需要使用return,使用则无需return即可实现双向数据绑定
return{
    num,
    changeNum
}

3:在template直接当作组件

<renderButton />

之前没有接触过render函数,直接在vue3上进行使用,网上找了很多方法,很多都是在setup中使用,没有找到在setup语法糖中的写法,试了很多次才搞明白,菜

上一篇:Vue3+TS给props声明类型用到泛型的问题


下一篇:关于Vue3数据更新而Table视图不更新的问题