vue render函数使用,vue render自定义组件
这篇文章主要介绍了某视频剪辑软件框架提出方法如何替换模板，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
渲染方法替换模板使用模板属性创建组件模板把父组件的模板创建换成使用提出方法创建模板和提出用法对比
render方法替换template
使用template属性创建组件模板
从“vue”导入某视频剪辑软件
const Item=Vue.component(Item ，{
模板：` div
氘子组件/h2
插槽/插槽
/div ` 1
})
const app=new Vue({
埃尔： #app ，
模板：` div ref=myDiv item ref=item
这是一个插槽/p
/项目
/div `，
数据：{
计数：0,
组件：{
项目
}
})
把父组件的template创建换成使用render方法创建
const app=new Vue({
埃尔： #app ，
数据：{
计数：0
},
渲染(createElement) {
返回创建元素(
分区,{
ref: myDiv ，
//domProps: {
//innerHTML:"span注意：添加该属性会把后面的子节点覆盖/span
//},
属性：{
id:"测试id”，
标题："测试标题"
}
},
[
createElement(item ，{
参考："项目"
},
[
createElement(p ，{
参考：" p "
}、这是一个槽)
])
])
},
组件：{
项目
}
})
1.如上面更改后的代码，渲染方法内传入标签名函数，接下来使用标签名函数来创建节点。
2.函数方法格式createElement(节点或组件名称, {节点属性}, [子节点])
3.先创建一个差异元素，内部包含ref=myDiv 的属性，使用数组存放其子节点
4.数组内子节点是项目组件，属性是ref=item ，其子节点为p，依次类推逐层创建子节点，最后的文本节点使用字符串或变量即可，无需再用[]包含。
template和render用法对比
App.vue（主入口文件）
模板
ParentCmp /
/模板
脚本
从导入ParentCmp ./parent CMP ；
导出默认值{
组件：{
ParentCmp
},
}
/脚本
ParentCmp.vue (template写法)
模板
差异
氕我是父母组件/h1
人力资源/
user style= background:# CCC text=我是传入的文本
模板v型槽：标题
p这是名字为页眉的插槽/p
/模板
p这是填充默认狭槽数据/p
模板v形槽：页脚
p这是名字为页脚的插槽/p
/模板
模板v槽：item=props
p名字为项目的作用域插槽。显示数据{{props}}/p
/模板
模板v槽：list=props
p名字为目录的作用域插槽。显示数据{{props}}/p
/模板
/用户
/div
/模板
脚本
从导入用户。/用户
导出默认值{
组件：{
用户
},
道具：{},
data() {
返回{}
},
方法：{}
}
/脚本
User.vue (template写法)
模板
差异
h4{{text}}/h4
插槽名称=标题/槽
狭槽默认的用户插槽/插槽
插槽名称=页脚/插槽
插槽名称=item v-bind=itemitem作用域插槽，展示姓名{{item.name}}/slot
slot name= list v-bind= { list } list作用域插槽/插槽
/div
/模板
脚本
导出默认值{
道具：{
文本：字符串
},
data() {
返回{
项目：{
名称： 张三，
年龄：28,
作品： 前端、后端、设计、产品
},
列表：[a ， b ， c]
}
}
}
/脚本
ParentCmp.js (render写法)
从导入用户。/用户
导出默认值{
道具：{},
data() {
返回{}
},
方法：{},
渲染(h) {
返回h(div ，[
h(h1 ，我是父母组件),
h(hr )，
h(用户，{
道具：{
文本： 我是传入的文本
},
风格：{
背景：" #ccc "
},
//作用域插槽写在scopedSlots里
scopedSlots: {
item: props=h(p ，名字为项目的作用域插槽。显示数据${JSON.stringify(props)} `)，
list: props=h(p ， p名字为目录的作用域插槽。显示数据${JSON.stringify(props)} `)
}
},
//非作用域插槽写数组里
[
h(p ，{slot: header}，这是名字为页眉的槽),
h(p ，这是填充默认狭槽数据),
h(p ，{slot: footer}，这是名字为页脚的槽),
])
]);
//jxs写法
/* return(
差异
氕我是父母组件/h1
人力资源/
用户
style=background: #ccc
text=我是传入的文本
scopedSlots={
{
道具=(p名字为项目的作用域插槽。显示数据{JSON.stringify(props)}/p)，
列表：道具=(p名字为目录的作用域插槽。显示数据{JSON.stringify(props)}/p)，
}
}
p slot=header 这是名字为页眉的插槽/p
p这是填充默认狭槽数据/p
p槽=页脚这是名字为页脚的插槽/p
/用户
/div
);*/
}
}
User.js (render写法)
导出默认值{
道具：{
文本：字符串
},
data () {
返回{
项目：{
名称： 张三，
年龄：28,
作品： 前端、后端、设计、产品
},
列表：[a ， b ， c]
}
},
方法：{
获取插槽(名称，数据){
如果（这个. scopedSlots[name]) {
归还这个scopedSlots[name](数据);
} else if(这个. slots[name]) {
归还这个. $ slots[名称]；
}
返回未定义的；
},
},
渲染(h) {
返回h(div ，[
h(h4 ，this.text)，
this.getSlot(header )，
这个. slots.default，
this.getSlot(footer )，
this.getSlot(item ，this.item)，
this.getSlot(list ，{list: this.list})，
])
//jxs写法
/* return(
差异
h4{this.text}/h4
{this.getSlot(header)}
{这个. slots.default}
{this.getSlot(footer)}
{this.getSlot(item ，this.item)}
{this.getSlot(list ，{list: this.list})}
/div
);*/
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。