渐进式的理解和使用Render
<!-- <template> <div class="container"> <h1>1</h1> </div> </template> --> <!-- 这里就不需要上面的 模板方式,直接通过render函数来生成组件 ---> <script> export default { data () { return { } }, components: { }, render(createElement){ //第一个参数:可传标签/组件名,第二个参数:选项,第三个子元素 return createElement('h1',{},'Hello Render') } } </script> <style scoped> </style>
render的内容1:
render(createElement){ //加点变化 let obj = { style:"color:#CCCCCC;border:1px solid red", } //第一个参数:可传标签/组件名,第二个参数:选项,第三个子元素 return createElement('h1',obj,'Hello Render') }
render的内容2:
props:{ tag:String //假设传递一个 h2 }, render(createElement){ //第一个参数:可传标签/组件名,第二个参数:选项,第三个子元素 return createElement(this.tag,{},'Hello Render') }
调用的是时候
效果:
render内容3:
<!-- <template> <div class="container"> <h1>1</h1> </div> </template> --> <!-- 这里就不需要上面的 模板方式,直接通过render函数来生成组件 ---> <script> export default { data () { return { people:['盖伦','韩信','慌子'] } }, props:{ tag:String //假设传递一个 ul的例子 }, render(createElement){ //第一个参数:可传标签/组件名,第二个参数:选项,第三个子元素 return createElement(this.tag,{},this.people.map(name=>createElement('li',{},`${name}`))) } } </script> <style scoped> </style>
页面调用
效果好的不行
render内容4:第二个参数加内容
<!-- <template> <div class="container"> <h1>1</h1> </div> </template> --> <!-- 这里就不需要上面的 模板方式,直接通过render函数来生成组件 ---> <script> export default { data () { return { people:['盖伦','韩信','慌子'] } }, props:{ tag:String //假设传递一个 ul的例子 }, render(createElement){ //第一个参数:可传标签/组件名,第二个参数:选项,第三个子元素 return createElement(this.tag,{},this.people.map(name=>createElement('li',{attrs:{class:'Te'},on:{ click:()=>{ console.log(`${name}被点击!!!`); } }},`${name}`))) } } </script> <style scoped> .Te{ color: red; } </style>
效果
样式和点击事件都被加上了
render内容5:render第一个参数除了标签,还可以是一个组件
Test.vue组件内容
<template> <div>传过来的内容 → {{msg}}</div> </template> <script> export default { props:{ msg:String }, data () { return { } }, } </script>
使用组件的内容
<script> import Test from './Test.vue' export default { render(createElement){ //第一个参数:可传标签/组件名,第二个参数:选项,第三个子元素 return createElement(Test,{props:{ msg:'Hello 幽冥狂_七' }}) } } </script> <style scoped> .Te{ color: red; } </style>
效果如何:
Render内容6:Render的妙用
AnchoredHeading.vue 文件内容
<!-- <template> <h1> <a href="#hello-youmingkuang">你好,幽冥狂_七</a> </h1> </template> --> <script> export default { props:{ level:Number }, name:"AnchoredHeading", render(createElemenet){ return createElemenet('h'+this.level,{attrs:{ href:'#hello-youmingkuang' }},'你好,幽冥狂_七') } } </script> <style scoped> </style>
效果图
这些有点过于繁琐,能不能在优化一下,看下面
新建一个 `AnchoredHeading.js` 文件
export default{ props:{ level:Number }, render(h){ //h 就是createElement return h('h'+this.level,this.$slots.default) //this.$slots.default 存放slot的值 } }
引用 js 文件
效果