1.前言
vue其实也有函数式组件哦,不是react才有函数组件的
这篇文章之前,建议先看下渲染函数标题组件,有衔接关系
2.函数组件概念也都一样
组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期访问
优点就是 轻量,灵活
简单翻译 既没有 data, 也没有 this
2.函数式组件写法
2.1 标志是functional
functional:true, //函数组件
2.2 没有this的影响
- 没有
template了,写上也不生效- 所有属性通过
render的第二个参数conetxt传递
简单的说就是把用到this获取属性的地方 ,属性都从context的props解构出来
在这篇文章渲染函数标题组件,基础上进行修改
3.贴图比较
1.png
4. 上代码
效果和之前的是一样的
Vue.component("heading", {
functional:true, //函数组件
props: {
level: {
type: String,
default: "1"
},
title: {
type: String,
default: ""
},
icon: {
type: String
}
},
render(h,context) {
// 子节点数组
console.log("上下文:",context);
let children = []
// 属性获取的变化
const {icon,title,level} = context.props
// icon处理
if (icon) {
children.push(h(
"svg",
{ class: "icon" },
[h("use", {
attrs: { 'xlink:href': '#icon-' +icon }
})]
))
}
children = children.concat(context.children)
const vnode = h(
"h" + level,
{ attrs: { title } },
children
)
console.log("查看", vnode);
return vnode
}
})
