vue之 render函数入门篇

render: function (createElement) {// createElement函数返回结果是VNodereturn createElement(tag, // 标签名称data, // 传递数据children // 子节点数组)
}

简单渲染一个 h1 标签

父组件
<template><div><Test title="我是title1"></Test></div>
</template><script>
import Test from './com/Test.vue'
export default {name: 'Home',components: {Test},
}
</script>子组件
<script>
export default {name: 'Test',props: {title: String},components: {},render: function(createElement) {return createElement('h1', // 01：标签名{// 02:当前标签的样式style: {color: 'red',background: '#001'}},// 03：当前标签的 props渲染数据this.title)}
}
</script>
<style lang="scss" scoped></style>

效果

简单渲染一个 ul 与 li

父组件
<template><div>Home<Test></Test></div>
</template><script>
import Test from './com/Test.vue'
export default {name: 'Home',components: {Test},data() {return {}},methods: {}
}
</script>
<style lang="scss" scoped></style>子
<script>
export default {name: 'Test',props: {title: String},components: {},data() {return {parent: 'ul',son: 'li',list: ['li-1', 'li-2', 'li-3']}},render: function(createElement) {return createElement(this.parent, // 01：标签名this.list.map(_ => {return createElement(this.son, _)}))}
}
</script>

默认插槽与具名插槽

父组件
<!--
描述：作者：xzl时间：05月16日132536
-->
<template><div>Home<Test><div name="header">我是header</div>我是默认插槽菜鸡<div>我是默认插槽2级菜鸡</div></Test></div>
</template><script>
import Test from './com/Test.vue'
export default {name: 'Home',components: {Test},data() {return {}},methods: {}
}
</script>
<style lang="scss" scoped></style>子
<!--
描述：作者：xzl时间：05月25日133237
-->
<script>
export default {name: 'Test',props: {title: String},components: {},data() {return {}},render: function(createElement) {let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的，这样写才能访问thislet _header = _this.$slots.header // $slots: vue中所有分发插槽，不具名的都在default里return createElement(// 1. 要渲染的标签名称：第一个参数【必需】'div',// 2. 1中渲染的标签的属性，详情查看文档：第二个参数【可选】{style: {color: '#333',border: '1px solid #ccc'}},// 3. 1中渲染的标签的子元素数组：第三个参数【可选】[createElement('div', _header), // createElement()创建的VNodes// 'text', // 文本节点直接写就可以this.$slots.default // 所有不具名插槽，是个数组])}
}
</script>
<style lang="scss" scoped></style>

效果

vue之 render函数入门篇相关推荐

iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是: 表格列头有一个字段和一个单位,两者样式不同,理想效果如下:"建筑面积四个字为18px.单位(㎡)为16px". ...
Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
vue.js render函数怎么传入自定义组件
vue.js render函数怎么传入自定义组件和定义子组件的用法一样 import Test from '@/components/Test' export default { render:(h ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
vue使用render函数自定义标签动态导入js文件
文章目录问题背景解决思路知识加油站 Render函数 createElement参数代码实现问题背景项目中需要引入国网思极地图,但是因为pc端的项目一般都是部署到内网.该项目要同时部署到2 ...
【Vue】render函数使用和详解
前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操 ...
vue中render函数的作用及解析
在vue脚手架的main.js文件中,存在这样一段代码: 意思是对vue实例的配置,其中render函数的作用是,将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeM ...
Vue的render函数
1.template模板父组件:App,子组件:Test app.vue中 <template><div id="app"><h1>这是app ...
vue的render函数用法
1.render简介前面我们的组件的模板都是在模板里写的(template),模板最后都会被vue编译成virtual dom(虚拟dom),在某些情况下模板可能不好用,例如需要实现一个动态的文章标 ...

vue之 render函数入门篇

目录

vue之 render函数入门篇

简单渲染一个 h1 标签

简单渲染一个 ul 与 li

默认插槽与具名插槽

vue之 render函数入门篇相关推荐

最新文章

热门文章

vue之 render函数 入门篇

目录

vue之 render函数 入门篇

简单渲染一个 h1 标签

简单渲染一个 ul 与 li

默认插槽 与 具名插槽

vue之 render函数 入门篇相关推荐

最新文章

热门文章

vue之 render函数入门篇

vue之 render函数入门篇

默认插槽与具名插槽

vue之 render函数入门篇相关推荐