Vue Render函数原理及代码实例解析_vue.js

来源:脚本之家  责任编辑:小易  

在父组件中调用子组件的方法:  1.给子组件定义一个ref属性。eg:ref="childItem"  2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}  2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。  父组件: <template> <child-item ref='child' /> <button @click='useChildFun'></button> </template> <script> ``` methods() { useChildFun:function(){ this.$refs.child.usedInPar('调用子组件中的方法'); } } </script> 子组件: ``` methods () { usedInPar(str){ console.log(str); } } 没有完整的代码,只有一个用法 总结 以上所述是小编给大家介绍的vue 父组件中调用子组件函数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章:解决Vue.js父组件$on无法监听子组件$emit触发事件的问题vue父组件异步获取数据传给子组件的方法vue中如何让子组件修改父组件数据父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法vue 父组件调用子组件方法及事件vue2.0 子组件改变props值,并向父组件传值的方法深入理解Vue父子组件生命周期执行顺序及钩子函数vue iview组件表格 render函数的使用方法详解Vue2.0父子组件传递函数的教程详解Vue学习笔记进阶篇之函数化组件解析www.zgxue.com防采集请勿采集本网。

简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM

nt-ui tree树形控件改iview的方法vue中使用iview自定义验证关键词输入框问题及解决方法vue iView 上传组件之手动上传功能vue iview组件表格 render函数的使用方法详解

因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。

您可能感兴趣的文章:VUE2.0中Jsonp的使用方法vue全局组件与局部组件使用方法详解vue iview组件表格 render函数的使用方法详解详解Vue的computed(计算属性)使用实例之

当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h

希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章:vue+iview 实现可编辑表格的示例代码vue iview组件表格 render函数的使用方法详解

虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下:

最近在做类似的事情,在okoala/vue-antd上学到一个做法。 首先,父组件传入一个`render`函数,用于描述要动态生成的子组件。相关代码如下: const columns = [{ title: '操作&

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="app"> <my-component :list="list"></my-component> </div> <script src="vue.js"></script> <script> Vue.component('my-component', { props: { list: { type: Array, default: () => [] } }, render(createElement) { if (this.list.length) { return createElement('ul', this.list.map(item => createElement('li', item))) } else { return createElement('p', 'Empty list') } } }) new Vue({ el: '#app', data: { list: ['html', 'css', 'javascript'] } }) </script></body></html>

您可能感兴趣的文章:vue+iview写个弹框的示例代码基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)浅谈vue的iview列表table render函数设置DOM属性值的方法使用vue +

另外,由于v-if,v-else,v-show等指令都无法在render里使用,需要自己手动实现,拿常用的v-model举个栗子:

的问题。JSX 在逻辑表达能力上虽然完爆模板,但是很容易写出凌乱的 render 函数,不如模板看起来一目了然。当然这里也有个人偏好的问题。 React 的社区/组件生态比 Vue 大

前注: 版本限制: Vue.js 2.0+ 1.0无法使用 没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结 非使用render方法的情况 完整代码: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> </head> <body> <div id="app"> <child :level="1">Hello world!</child> </div> <script type="text/x-template" id="template"> <div> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-if="level === 2"> <slot></slot> </h2> <h3 v-if="level === 3"> <slot></slot> </h3> <h4 v-if="level === 4"> <slot></slot> </h4> <h5 v-if="level === 5"> <slot></slot> </h5> <h6 v-if="level === 6"> <slot></slot> </h6> </div> </script> <script type="text/javascript"> Vue.component('child', { template: '#template', props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html> 代码说明: 最下面的new Vue方法很明显,是new了一个Vue的实例,挂载点是”#app”这个dom Vue.component这部分代码,第一个参数表示注册了一个Vue的组件,标签名是child(即 <child> 标签会被替换); 第二个参数中,template属性表示取找id=“template”的标签(另注,这个标签是script,或者是div,或者是template,或者是其他,没有影响),然后将这个标签作为组件的模板 props表示传递给这个组件的变量,通过标签中的v-bind:level这种形式传递变量level的值等于1。在这里的写法是限制变量类型为number,并且强制需要 slot表示内容分发,具体来说,就是把组件替换的源html标签里的内容(如 <child> 标签里面的内容,不包含 <child> 标签本身,这里是Hello world!),发在 <slot> 标签所在的位置(即放在 <h1>``````<h2> 这样的标签内)。 如果还不理解,可以运行该段代码查看结果,或者去看vue的官方文档说明 总的来说,顺序如下:注册一个组件,这个组件有模板,这个模板里有一个变量,变量的值通过父组件来传递,然后根据变量的值,通过v-if命令显示对应的html标签内容,然后在父组件里使用这个组件,让子组件显示需要显示的内容。 这样的代码有一个缺陷,就是需要写大量重复的代码,如从 <h1> ~ <h6> 共6种情况。如果这样的模板比较复杂,比如 <hx> 标签里还有很多其他内容,显然会让人十分困扰,既不美观也不好用。 使用render方法的情况 解决办法就是render方法,全部代码如下: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> </head> <body> <div id="app"> <child v-bind:level="2">Hello world!</child> </div> <script type="text/javascript"> Vue.component('child', { render: function (createElement) { return createElement( 'h' + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html> 代码说明: 1、这里的代码和上面区别之处有两点: 其一,没有显式的模板内容,而是通过render方法生成; 其二,使用了createElement方法 2、关于createElement方法,他是通过render函数的参数传递进来的,这个方法有三个参数, 第一个参数主要用于提供dom的html内容,类型可以是字符串、对象或函数。比如”div”就是创建一个 <div>标签 第二个参数(类型是对象)主要用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类,具体可以参考 官方文档 里这一小节的说明 第三个参数(类型是数组,数组元素类型是VNode)主要用于说是该结点下有其他结点的话,就放在这里。 比如说,有需要分发的标签 <slot>,则通过 this.$slots.default 来获得,或许还有其他组件之类,可能需要被使用的,应该也是放在这里。 个人初步理解是,在原本被替换的地方,例如例上面代码中的 <child> 标签,在其下的每个次一级标签为一个元素,放在 this.$slots.default这个数组中,例如上面的话,这个数组只有一个元素,但是以下代码: <child v-bind:level="2"><div>Hello</div><div> world!</div></child> 这个数组中则有两个元素,分别是 <div>Hello</div> 和 <div> world!</div>,例如 this.$slots.default[0] 则表示第一个标签。 另外,假如这2个元素中间有空格、换行符之类,那么数组中则有三个元素,那个空格、换行符则为第二个元素。这个属性有点类似dom的 childNodes属性,不是单纯以标签才算作子节点的。(但注意,不是完全相同) 有时候,我们可能想在里面添加其他的组件,例如将abc组件注册在里面。那么,我们首先要注册这个abc组件,然后将abc组件在数组里通过createElement来创建标签,只有通过这样的方式创建的abc标签,才能被abc组件使用。单纯输入字符串 "<abc></abc>" 这样是不可以的。 如以下代码是可行的:(在通过render方法生成的模板中添加别的组件) <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> </head> <body> <div id="app"> <child v-bind:level="2"> <div>Hello</div><div> world!</div> </child> </div> <script> Vue.component('abc', { template: "<div>abc</div>" }) Vue.component('child', { render: function (createElement) { console.log(this.$slots) return createElement( 'h' + this.level, // tag name 标签名称 [this.$slots.default[0], createElement("abc"), this.$slots.default[1]] // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html> 显示结果是: Hello abc world! 最后,如果想将原有内容全部使用(而不是只取部分标签),那么直接使用 this.$slots.default 作为第三个参数即可,他本身就是一个数组。 3、总而言之,createElement方法的作用就是动态的创建一个dom用于被render函数渲染,其中参数二和参数三可以选择性省略,参数二用于设置dom的样式、属性、事件等,参数三用于设置分发的内容,包括新增的其他组件。 粗略理解的话,可以理解为:createElement( 标签名, 标签属性, 标签里的内容) 这样的话,我们就有了一个组件的模板所需要的全部内容了 总结 1、render方法的实质就是生成template模板; 2、通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的; 3、这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容 4、通过这三个参数,可以生活曾一个完整的模板。 备注: 1、render方法可以使用JSX语法,但需要Babel plugin插件; 2、render方法里的第三个参数可以使用函数来生成多个组件(特别是如果他们相同的话),只要生成结果是一个数组,且数组元素都是VNode即可 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue中render函数的使用详解
  • 浅谈vue render函数在elementui中的应用
  • vue iview组件表格 render函数的使用方法详解
  • vue中render函数的使用方法
  • 详解vue渲染函数render的使用
  • 浅谈vue的iview列表table render函数设置dom属性值的方法
  • 如何理解vue的render函数的具体用法
  • vue2.x中的render函数详解
  • vue项目服务器部署之子目录部署方法
  • vue组件挂载到全局方法的示例代码
  • vuejs 页面的区域化与组件封装的实现
  • vue实现微信二次分享以及自定义分享的示例
  • vue 计时器组件的实现代码
  • vue-cli3 dllplugin 提取公用库的方法
  • 手写vue弹窗modal的实现代码
  • vue中使用rem布局代码详解
  • vue中使用极验验证码的方法(附demo)
  • 浅谈angular4.0中路由传递参数、获取参数最nice的写法
  • Vue.js render方法使用详解
  • vue 父组件中调用子组件函数的方法
  • 关于Vue源码vm.$watch()内部原理详解
  • VUE重点问题总结
  • 在vue项目中引用Iview的方法
  • Vue中使用方法、计算属性或观察者的方法实例详解
  • vue+iview动态渲染表格详解
  • vue中,父组件可以向子组件传递一个组件吗
  • vue+iview+less+echarts实战项目总结
  • Vue和React的使用场景和深度有何不同
  • 详解vue挂载到dom上会发生什么
  • 探索Vue高阶组件的使用
  • 浅谈Vue页面级缓存解决方案feb-alive(上)
  • Vue如何实现响应式系统
  • 使用Vue.js开发微信小程序开源框架mpvue解析
  • 浅谈Vue页面级缓存解决方案feb-alive (下)
  • Vue 实现双向绑定的四种方法
  • vue响应式系统之observe、watcher、dep的源码解析
  • 基于Vue.js实现数字拼图游戏
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue中render函数的使用详解浅谈vue render函数在elementui中的应用vue iview组件表格 render函数的使用方法详解vue中render函数的使用方法详解vue渲染函数render的使用浅谈vue的iview列表table render函数设置dom属性值的方法如何理解vue的render函数的具体用法vue2.x中的render函数详解vue项目服务器部署之子目录部署方法vue组件挂载到全局方法的示例代码vuejs 页面的区域化与组件封装的实现vue实现微信二次分享以及自定义分享的示例vue 计时器组件的实现代码vue-cli3 dllplugin 提取公用库的方法手写vue弹窗modal的实现代码vue中使用rem布局代码详解vue中使用极验验证码的方法(附demo)浅谈angular4.0中路由传递参数、获取参数最nice的写法vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(pr简单理解vue中props属性vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue实现文件上传功能3分钟读懂移动端rem使用方法(推荐)详解mpvue中使用vant时需要注意的onchangvue router 用户登陆功能的实例代码详解vue express启动数据服务vue中使用echarts制作圆环图的实例代码详解vue-cli之webpack3构建全面提速优化vue父子传递实例讲解前端框架vue.js中directive知识详解vue js 使用组件实现双向绑定的示例代码vue刷新修改页面中数据的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved