好资源导航 » 文章资讯 » Vue函数式组件的应用实例详解

Vue函数式组件的应用实例详解

2023-08-15 14:38:05 69

一、函数式组件和普通组件的区别

渲染快
没有实例，意味着没有（this）
没有生命周期（没有响应式数据）

二、组件函数的使用

1.以局部组件为例，将组件标记为functional=ture;

因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象：

props：提供所有prop的对象children:VNode子节点的数组slots:一个函数，返回了包含所有插槽的对象scopedSlots:(2.6.0+)一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。data：传递给组件的整个数据对象，作为createElement的第二个参数传入组件parent：对父组件的引用listeners:(2.3.0+)一个包含了所有父组件为当前组件注册的事件监听器的对象。这是data.on的一个别名。injections:(2.3.0+)如果使用了inject选项，则该对象包含了应当被注入的属性。

在添加functional:true之后，需要更新我们的锚点标题组件的渲染函数，为其增加context参数，并将this.$slots.default更新为context.children，然后将this.level更新为context.props.level。

因为函数式组件只是函数，所以渲染开销也低很多。

在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：

程序化地在多个组件中选择一个来代为渲染；
在将children、props、data传递给子组件之前操作它们。

data(){
return{
changer:1
}
},

components:{
MyCmp:{
functional:true,//必要的设置
render:function(createElement,context){
functiongetcomp(cmp){
console.info(this);//输出为undefined，证明没有实例
if(cmp==1){
returncomp1;
}else{
returncomp2
}
}
returncreateElement(getcomp(context.props.changer),
{
props:{
cmpData:context.props.data//为子组件传递数据
}
}
);
},

2.定义要渲染的组件

varcomp1={
props:['cmpData'],
render:function(createElement,context){
returncreateElement('el-input',{
props:{
type:this.cmpData
}
});
},
mounted(){
console.log(this)//这个组件为正常组件
},
}
varcomp2={
props:['cmpData'],
render:function(createElement,context){
returncreateElement('el-button',{
props:{
type:this.cmpData
}
});
},
mounted(){
console.log(this)//正常组件
},
}

三、在父组件中使用

返回顶部
514930285
czq8825@qq.com

Vue函数式组件的应用实例详解

随机推荐