Vue中的render函数render: h => h(App)

dendoink 发布于2019-08-22 16:18 / 2718人阅读

摘要：在学习时，使用创建了一个项目，文件中有一行经典代码，那她是什么意思呢文件内容接下来就是答案喽等价于等价于即上一个示例提供一个在页面上已经存在的元素作为实例挂载目标有这么几个重要的参数第一个参数必须一个标签字符组件选项对象一个返回标签

在学习Vue.js时，使用vue-cli创建了一个Vue项目，main.js文件中有一行经典代码 render: h => h(App)，那她是什么意思呢？

main.js 文件内容

   import Vue from "vue"
    import App from "./App.vue"
    new Vue({
      el: "#app",
      render: h => h(App)
    })

接下来就是答案喽

{
    render: h => h(App);
}

等价于

{
    render: h => {
        return h(App);
    }
}

等价于

{
    render: function(h) {
        return h(App);
    }
}

即：

{
    render: function(createElement) {
        return createElement(App);
    }
}

上一个示例




    
    Document

createElement 有这么几个重要的参数

第一个参数(必须) - {String | Object | Function}




    
    render

第二个参数(可选) - {Object}




    
    render

第三个参数(可选) - {String | Array}




    
    render

两种组件写法对比




    
    render

this.$slots用法




    
    render
    


    
        
            About Me
            Here"s some page content
            Copyright 2016 Evan You
            If I have some content down here

使用props传递数据




    
    render

VNodes必须唯一




    
    render

v-model指令




    
    render
    


    
        
        你的名字是{{name}}

作用域插槽




    
    render

向子组件中传递作用域插槽




    
    render

函数化组件




    
    render

GPU云服务器云服务器 Rendering Renderer render render 流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94230.html

render: h => h(App) 是什么意思？

摘要：将作为的别名是生态系统中的一个通用惯例，实际上也是所要求的，如果在作用域中失去作用，在应用中会触发报错。背景在学习时，使用创建了一个项目，文件中有一行代码不知道是什么意思。将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用，在应用中会触发报错。背景在学习Vue.js时，使用vue-cli创...

Java_oldboy 2019-08-22 15:36 评论0 收藏0
webpack -> vue Component 从入门到放弃（四）

摘要：先展示一下文件目录结构先把相关的依赖给装好注意一下注释只是为了解释，在中不能写注释插件加载器预编译语法跨平台环境用来设置命令行安装预编译语法的配置中的对象，用于处理目录的对象，提高开发效率。 Foreword 之前三篇大致介绍了webpack的用法，正如这个系列标题而言从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合...

z2xy 2019-08-20 15:07 评论0 收藏0
webpack -> vue Component 从入门到放弃（四）

摘要：先展示一下文件目录结构先把相关的依赖给装好注意一下注释只是为了解释，在中不能写注释插件加载器预编译语法跨平台环境用来设置命令行安装预编译语法的配置中的对象，用于处理目录的对象，提高开发效率。 Foreword 之前三篇大致介绍了webpack的用法，正如这个系列标题而言从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合...

MycLambert 2019-08-01 16:32 评论0 收藏0
vue项目中main.js使用方法详解

　　我们都知道初始化vue实例就是main.js，并且它还需要插件，现在我们就讨论下main.js使用方法：　　第一部分：main.js文件解析　　src/main.js是入口文件，它主要是用于是初始化vue实例，且还需插件，在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素：　　　//基础配置　　importVuefrom'vue' 　　importAppf...

3403771864 2022-09-28 23:24 评论0 收藏0
汇总在vue中写jsx的方式

　　学习就是在不断的总结，我们今天说的就是汇总在vue中写jsx的方式。　　版本　　本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18；本文代码github仓库地址　　render函数　　render函数和vue中的template是互斥的，template最终是要编译成virtual Dom的，但我们要知道render函数可以更直接构建virtual Dom； virtual ...

3403771864 2022-10-10 22:08 评论0 收藏0