Vue--函数式组件--使用/教程/实例

约定不等于承诺〃 2023-10-02 17:37 1阅读 0赞

原文网址：[Vue--函数式组件--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vue中的函数式组件的用法。

**官网**

[渲染函数 & JSX — Vue.js][_ JSX _ Vue.js]

**什么是函数式组件**

函数式组件实际上只是一个接受一些 prop 的函数。

函数式组件特点：

1.  没有状态。
    
    1.  即：没有[响应式数据][Link 1]
    2.  也不监听任何传递给它的状态。
2.  没有实例。
    
    1.  即：没有 this 上下文
3.  没有生命周期方法
4.  只接收props参数

**函数式组件的优点**

1.  渲染的开销很小。（因为函数式组件只是函数）
2.  便于包装组件。
    
    1.  例1：程序化地在多个组件中选择一个来代为渲染；
    2.  例2：在将 children、props、data 传递给子组件之前操作它们。

## 用法 ##

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

## 示例1：裸HTML ##

<!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>

结果

![6300472ff10a40eaac99da25ce948d56.png][]

## 示例2：Vue工程 ##

**router/index.js**

import Vue from 'vue'
    import Router from 'vue-router'
    import CompA from "@/components/CompA";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/compA',
          name: 'compA',
          component: CompA
        }
      ]
    })

**components/CompA.vue**

<template>
      <div class="compA">
        <ChildOne :class="className" id="btn1">This is button</ChildOne>
      </div>
    </template>
    
    <script>
    import ChildOne from "@/components/ChildOne";
    
    export default {
      components: {ChildOne},
      data() {
        return {
          className: "buttonName",
        }
      },
    }
    </script>
    
    <style scoped>
    </style>

**components/ChildOne.vue**

**测试**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

[Vue--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122294827
[_ JSX _ Vue.js]: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6
[Link 1]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
[6300472ff10a40eaac99da25ce948d56.png]: https://img-blog.csdnimg.cn/6300472ff10a40eaac99da25ce948d56.png
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201203235616191.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70

Vue--函数式组件--使用/教程/实例

发表评论取消回复

还没有评论，来说两句吧...

相关阅读