Vue3 渲染函数 Api 的使用

我就是我 2022-12-24 09:53 113阅读 0赞

> Vue3 中 渲染函数的用法更简单、直接，插槽统一使用 $slots 获取。

<template>
       
       <RenderTest v-model:counter="counter">
        <template #default>title</template>
        <template #content>content...</template>
      </RenderTest>
    </template>
    
    <script>
    import {  h } from "vue";
    
    export default { 
      data() { 
        return { 
          counter: 1,
        };
      },
      components: { 
        RenderTest: { 
          props: { 
            counter: { 
              type: Number,
              default: 0,
            },
          },
          render() { 
            return h("div", [
              h(
                "div",
                { 
                  onClick: this.onClick,
                },
                [`I am RenderTest: ${ this.counter}`, this.$slots.default(), this.$slots.content()]
              ),
            ]);
          },
          methods: { 
            // 点击更新 counter 的值
            onClick() { 
              this.$emit("update:counter", this.counter + 1);
            },
          },
        },
      }
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue渲染函数

渲染函数 * 基础 * 节点、树以及虚拟DOM * * 虚拟DOM * createElement参数 * * 深入数据对象 *...

淡淡的烟草味﹌/ 2024年04月17日 05:38/ 0 赞/ 39 阅读

相关 Vue3 Composition API（setup函数）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq\_45

柔光的暖阳◎/ 2023年01月16日 09:50/ 0 赞/ 109 阅读

相关 Vue3 函数式组件的使用

> Vue3 中废除了 functional 特性声明，具体使用方法如下： <template>  <Fun

偏执的太偏执、/ 2022年12月24日 09:56/ 0 赞/ 274 阅读

相关 Vue3 渲染函数 Api 的使用

> Vue3 中渲染函数的用法更简单、直接，插槽统一使用 $slots 获取。 <template> <!-- 渲染函数 Render Api 使用

我就是我/ 2022年12月24日 09:53/ 0 赞/ 114 阅读

相关 ③Vue3 Composition API（setup函数）

Vue3 Composition API介绍 setup函数基本使用方法 setup 中创建数据（ref）

落日映苍穹つ/ 2022年11月22日 05:15/ 0 赞/ 209 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 354 阅读

相关 Vue3的Composition API 之 Setup函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ゝ一世哀愁。/ 2022年10月20日 13:47/ 0 赞/ 154 阅读

相关 VUE3组合api的钩子函数生命周期

> 选项API生命周期选项和Composition API之间的映射 > beforeCreate------>使用setup() > created------>使用

缺乏、安全感/ 2022年09月08日 14:49/ 0 赞/ 143 阅读

相关 VUE3(setup响应式函数系统API)

> Vue3.0提供的一组具有响应式特性的杉树式API，以函数的形式提供 > 1、reactive > reactive（）函数接收一个普通对象，返回该普通对象的响应式

墨蓝/ 2022年09月08日 14:00/ 0 赞/ 186 阅读

相关 vue渲染函数&JSX

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完全编程能力，这时你可以使用render函数，它比temp

妖狐艹你老母/ 2022年04月08日 11:17/ 0 赞/ 193 阅读