1.前言
vue其实也有函数式组件哦,不是react才有函数组件的
这篇文章之前,建议先看下渲染函数标题组件,有衔接关系2.函数组件概念也都一样
组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期访问
优点就是 轻量,灵活
简单翻译 既没有 data, 也没有 this
2.函数式组件写法
2.1 标志是functional
functional:true, //函数组件
2.2 没有this的影响
- 没有
template了,写上也不生效- 所有属性通过
render的第二个参数conetxt传递
简单的说就是把用到this获取属性的地方 ,属性都从context的props解构出来
在这篇文章渲染函数标题组件,基础上进行修改
3.贴图比较
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 } })
