Vue-Render函数理解示例

最新推荐文章于 2024-07-18 10:24:18 发布
最新推荐文章于 2024-07-18 10:24:18 发布
阅读量74 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wipphj/p/6703953.html
版权

对应文档节点: https://vuefe.cn/v2/guide/render-function.html#Slots

<body>
    <div id="app">
        <div class="parent">
            <anchored-heading>
            </anchored-heading>
        </div>
    </div>
</body>

<script>
    Vue.component('child', {
        render: function (createElement) {
            // <div><slot :text="msg"></slot></div>
            //debugger;
            return createElement('div', [
                this.$scopedSlots.default({
                    text: this.msg
                })
            ])
        },
        // template: `
        //     <div class="child">
        //         <slot :text="msg"></slot>
        //     </div>
        // `,
        data: function () {
            return {
                msg: "Demo"
            }
        }

    });

    Vue.component('anchored-heading', {
        render(createElement) {
            return createElement('div', [
                createElement('child', {
                    // pass scopedSlots in the data object
                    // in the form of { name: props => VNode | Array<VNode> }
                    scopedSlots: {
                        default: function (props) {
                            debugger;
                            return createElement('span','hello-'+ props.text)
                        }
                    }
                })
            ])
        },
        // template: `
        //     <div class="parent">
        //         <child>
        //             <template scope="props">
        //             <span>hello {{ props.text }}</span>
        //             </template>
        //         </child>
        //     </div>
        // `
    })

    new Vue({
        el: "#app"
    });
</script>

 

转载于:https://www.cnblogs.com/wipphj/p/6703953.html

weixin_34337381
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE中关于render函数相关案例
Jasons的博客
04-15 1263
最近，由于业务需求使用iview作为前端UI框架，在处理table的时候总是，有些不满意的地方，最后发现在iview可以使用vue的render函数。特此记录。 Render函数：render函数接收一个 createElement 方法作为第一个参数用来创建VNode（虚拟DMO） render: function (createElement) { //do something ...
Vue Render函数创建DOM节点代码实例
10-15
主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue Render函数用法示例
weixin_30871905的博客
07-18 304
虽然在render里使用createElement函数创建DOM节点不是很直观，但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下： 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
vue render函数实战
weixin_40046130的博客
06-19 272
当我们需要页面动态改变时，就需要render函数 render函数的特点就是没有html标签 没有template模版 只有script标签 跟react很像 例子：table.vue <script> export default { props: ['items'], render: function(createElement) { let self = this console.log(thi
【Vue】render函数使用和详解
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
05-19 2万+
前言 在平时编程时，大部分是通过template来创建html。但是在一些特殊的情况下，使用template方式时，就无法很好的满足需求，在这个时候就需要 通过JavaScript 的编程能力来进行操作。此时，就到了render函数展示拳脚去时候了。 render的作用 在官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。而使用render函数后，代码就精简了很多。 Vue.com
vue-render-test:vue的渲染函数和jsx示例demo
04-30
Vue渲染测试 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 有关工作原理的详细...
Vue中render函数的使用方法
08-28
Vue 中 render 函数的使用方法 在 Vue 中，render 函数是一种强大的工具，允许开发者使用 JavaScript 代码动态生成 HTML 内容。今天，我们将深入探讨 render 函数的使用方法，並探讨它在实际开发中的应用场景。 ...
VUE-Table上绑定Input通过render实现双向绑定数据的示例
10-18
本示例将详细解释如何在Vue-Table上通过`render`方法绑定`Input`并实现双向数据绑定。 首先，Vue-Table通常是一个基于Vue.js的组件，用于展示数据，提供排序、筛选等特性。在这个例子中，我们看到一个`<Table>`组件...
浅析Vue 中的 render 函数
10-15
例如，下面是一个简单的`render`函数示例： ```javascript render(h) { return h('div', { class: { 'is-red': this.isRed }, }, [ h('p', '这是一个 render 事例') ]); } ``` 在这个例子中，`h('div')`创建...
vue render生成html,Vue Render函数简介及示例
weixin_36332642的博客
06-09 711
我们知道 Vue 模板是非常强大的，基本可以完成我们日常开发的所有任务。但是，有一些用例，如基于输入或插槽值创建动态组件方式，render 函数会比模板完成的更好也更出色。用过 React 开发的人对 render 函数应该非常熟悉，因为React组件通过 JSX和 render 函数来构建的。 尽管Vue render 函数也可以用JSX编写，但在这里我们使用原生 JS方式，因为这样，我们可以更...
详解在vue项目中使用render函数
圆圆的 JavaScript 博客
03-02 3万+
不停留在Vue.component('heading', {render: function (h) {return h()},走进工程，实战render函数。
vue中的render函数
m0_51328823的博客
05-05 4034
vue中的render函数的使用 我们先看一个例子： render: function (createElement) { return createElement('h1', this.blogTitle) } 相当于： <h1>{{ blogTitle }}</h1> vue中的render函数，它返回的是一个虚拟节点vnode，也就是我们要渲染的节点。 重点看一下createElement参数 createElement( // 参数一：{String | Object
终于搞懂了vue 的 render 函数（一） -_-|||
热门推荐
Amy的博客
10-11 15万+
文章目录render 函数作用render 函数讲解render 函数的返回值（VNode）render 函数的参数（createElement）createElement 函数的返回值（VNode）createElement 函数的参数（三个）结合代码 vue渲染函数文档第一遍看的晕晕乎乎的，再看看写写终于清晰了。建议配合文档阅读，本文也是根据文档加上自己的理解。 注：本文代码都是在单文件组件中...
vuejs的render渲染函数
z1340954953
12-16 1万+
官网文档地址:https://cn.vuejs.org/v2/guide/render-function.html 引入：         vue推荐绝大数情况下实验template创建 html，但是我们时常在vue开发需要动态的生成页面，这就是rendered函数，它比template更接近编译器          前面的博客有介绍过slot，它具备将语句中html显示对应slot的位置
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 430
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 348
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 160
只要掌握了这些react技能，基本就可以熟练使用react了
vue3render函数使用
09-09
Vue 3中的render函数是用来创建组件的虚拟DOM树，并将其渲染到实际的DOM上。它可以用于编写更灵活和高效的组件。 在Vue 3中，render函数采用了一种新的语法，称为JSX语法。下面是一个简单的示例，展示如何使用render函数： ```javascript import { createApp, h } from 'vue' const app = createApp({ render() { return h('div', 'Hello, Vue 3!') } }) app.mount('#app') ``` 在上面的示例中，我们首先导入了`createApp`和`h`函数。`createApp`用于创建Vue应用实例，而`h`函数是用来创建虚拟DOM节点。 在`render`函数中，我们使用`h`函数创建了一个`div`节点，并设置其内容为"Hello, Vue 3!"。最后，我们使用`app.mount('#app')`将应用挂载到id为`app`的DOM元素上。 你也可以在render函数中创建更复杂的虚拟DOM结构，例如嵌套的子节点、绑定事件等。以下是一个稍复杂的示例： ```javascript import { createApp, h } from 'vue' const app = createApp({ render() { return h('div', [ h('h1', 'Hello, Vue 3!'), h('button', { onClick: this.handleClick }, 'Click me') ]) }, methods: { handleClick() { console.log('Button clicked!') } } }) app.mount('#app') ``` 在上面的示例中，我们创建了一个包含`h1`标题和一个按钮的`div`节点。按钮上绑定了`onClick`事件，点击按钮时会触发`handleClick`方法。 这就是使用Vue 3中的render函数创建组件的基本用法。希望对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值