原文网址:Vue--函数式组件--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍Vue中的函数式组件的用法。
官网
渲染函数 & JSX — Vue.js
什么是函数式组件
函数式组件实际上只是一个接受一些 prop 的函数。
函数式组件特点:
- 没有状态。
- 即:没有响应式数据
- 也不监听任何传递给它的状态。
- 没有实例。
- 即:没有 this 上下文
- 没有生命周期方法
- 只接收props参数
函数式组件的优点
- 渲染的开销很小。(因为函数式组件只是函数)
- 便于包装组件。
- 例1:程序化地在多个组件中选择一个来代为渲染;
- 例2:在将 children、props、data 传递给子组件之前操作它们。
用法
Vue.component('my-component', {
functional: true,
// Props 是可选的
props: {
// ...
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
}
})
示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<div id="app">
<list-view-comp :id="'listViewId'" :list-data="listData"></list-view-comp>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
Vue.component('listViewComp', {
functional: true, // should be set true for functional component
props: {
listData : {type : Array, required : true}
},
render(createElement, context){
console.log("title is: " + context.props.listData[0].title);
console.log("content is: " + context.props.listData[0].content);
let titleDom = createElement(
"div",
{
style : {
width : "450px",
height : "30px",
color : "red"
}
},
context.props.listData[0].title
);
let contentDom = createElement(
"div",
{
style : {
width : "450px",
height : "30px",
color : "green"
}
},
context.props.listData[0].content // content is passed down by context
);
return createElement(
"div",
{
style : {
width: "1000px",
height: "300px"
}
},
[titleDom, contentDom] //The div have two children: titleDom, contentDom
)
}
})
const app = new Vue({
data(){
return{
listData : [
{
title : "This is title",
content : "This is content"
}
]
}
}
}).$mount("#app");
</script>
</body>
</html>
结果