Vue--函数式组件

爱被打了一巴掌 2022-12-26 08:25 172阅读 0赞

原文网址：[Vue--函数式组件\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN]

# 其他网址 #

> [渲染函数 & JSX - 函数式组件 - 《Vue.js v2.x 官方教程》 - 书栈网][_ JSX - _ - _Vue.js v2.x _ -]

# 实例 #

**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/110590438
[_ JSX - _ - _Vue.js v2.x _ -]: https://www.bookstack.cn/read/vue-v2.x/spilt.6.render-function.md
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/c7320ffd3bb344ff821b531d14763c49.png