函数式组件用法

最新推荐文章于 2023-11-30 14:39:48 发布

夜跑者

最新推荐文章于 2023-11-30 14:39:48 发布

阅读量797

点赞数 1

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/104034122

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

Vue 官网对函数式组件有以下描述：

我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。

一个函数式组件就像这样：

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

组件里面所用的数据是通过render函数中的第二个参数context传递过来的。

下面我们就通过一个例子来看看函数式组件怎么用。需求：用函数式组件渲染出如下结果

最上边是图片，在图片的右下角是个logo图片，在图片下面是两行文字。

还是直接上代码吧，代码中在关键的地方写了注释。

<html>
 
<head>
<style type="text/css">

</style>
</head>
 
<body>
    <script src="./vue.js"></script>

    <div id="app">
        <list-view-comp :id="'listViewId'" :list-data="listData"></list-view-comp>
    </div>
    
<script>

    Vue.component('listViewComp', {
        functional: true,  // should be set true for functional component
        props: {
            listData : {type : Array, required : true}
        },
        render(createElement, context){
            console.log("icon is: " + context.props.listData[0].icon);
            console.log("title is: " + context.props.listData[0].title);
            var logoDom = createElement(
                "div",
                {
                    style : {
                        width : "68px",
                        height : "85px",
                        position: "absolute",
                        right : "0px",
                        bottom : "0px",
                        backgroundImage : `url(${context.props.listData[0].logo})`
                    }
                }
            );
            var iconDom = createElement(
                "div",
                {
                    style : {
                        width : "450px",
                        height : "237px",
                        position: "relative",
                        backgroundImage : `url(${context.props.listData[0].icon})`
                    }
                },
                [logoDom]  //iconDom is parent, logoDom is children
            );
            var titleDom = createElement(
                "div",
                {
                    style : {
                        width : "450px",
                        height : "30px",
                        color : "red"
                    }
                },
                context.props.listData[0].title
            );
            var subTitleDom = createElement(
                "div",
                {
                    style : {
                        width : "450px",
                        height : "30px",
                        color : "green"
                    }
                },
                context.props.listData[0].subTitle  // subTitle is passed down by context
            );
            return createElement(
                "div",
                {
                    style : {
                        width: "1000px",
                        height: "300px"                                                                                          
                    }
                },
                [iconDom, titleDom, subTitleDom] //The div have three children: iconDom, titileDom, subTitleDom
            )
        }
    })

    const app = new Vue({
        data(){
            return{
                listData : [
                    {
                        icon : "./icon.png",
                        logo : "./logo.png",
                        title : "title 1",                        
                        subTitle : "sub title 1"
                    }
                ]
            }
        }
    }).$mount("#app");

</script>
</body>
</html>

从上面的代码看出函数式组件要在组件中声明functional: true 。

如哪还有不明白的地方请留言探讨。