资讯专栏INFORMATION COLUMN

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

dendoink / 2679人阅读

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

在学习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
    


    

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

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

相关文章

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

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

    Java_oldboy 评论0 收藏0
  • webpack -> vue Component 从入门到放弃(四)

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

    z2xy 评论0 收藏0
  • webpack -> vue Component 从入门到放弃(四)

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

    MycLambert 评论0 收藏0
  • vue项目中main.js使用方法详解

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

    3403771864 评论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 评论0 收藏0

发表评论

0条评论

dendoink

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<