Vue组件化的基本使用

水深无声 2022-10-29 05:23 209阅读 0赞

效果图：  
![在这里插入图片描述][202102081923598.jpg_pic_center]

组件化的基本使用步骤：  
1、创建组件构造器对象  
2、注册组件  
3、使用组件  
`核心代码如下：`

<body>
    <div id="app">
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>
    <script src="../Vue_js/vue.js"></script>
    <script>
        //创建组件构造器模板
        const cpnC = Vue.extend({ 
            template: '' +
                '<div>' +
                '<h2>标题</h2>' +
                '<p>我的内容哈哈哈哈</p>' +
                '</div>'
        })
        //注册组件
        Vue.component('my-cpn', cpnC)
        
        const app = new Vue ({ 
            el: '#app',
            data: { 
                message: 'vue模板',
            },
            methods: { 
    
            },
        })
    </script>
    </body>

以上组件化的使用是全局组件，下图展示局部组件的创建方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

[202102081923598.jpg_pic_center]: /images/20221024/01552b200b70452bbcf77c1074c35178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/1463b35dcc1c499999b03f7e25853e08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

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

相关阅读

相关 vue组件的基本介绍

在学习组件之前，我们先了解一下项目的结构一.项目的结构 1.项目的总体结构 ![在这里插入图片描述][5274777ed0ac42088fd3276f7e183

ゝ一纸荒年。/ 2024年04月08日 08:18/ 0 赞/ 118 阅读

相关 Vue 组件化开发

文章目录前言组件化开发底部菜单 TabMenu 父子组件相互传数据父传子：自定义属性子传父：自定义事件

待我称王封你为后i/ 2023年10月13日 09:50/ 0 赞/ 55 阅读

相关 Vue 组件化开发

Vue 组件化开发什么叫做组件化实例什么叫做组件化所谓组件化，就是把页面拆分成多个组件然后可重复利用，每个组件依赖的 CSS、JS、模板、图片

比眉伴天荒/ 2023年10月05日 13:22/ 0 赞/ 27 阅读

相关 vue组件的基本使用：入门示例

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

我就是我/ 2023年10月02日 17:25/ 0 赞/ 17 阅读

相关 Vue 组件化开发

![在这里插入图片描述][20200715191621219.png] 1.1 组件化简介 1.1.1 概述将实现页面某一

怼烎@/ 2023年02月26日 12:29/ 0 赞/ 51 阅读

相关 Vue组件化的基本使用

效果图： ![在这里插入图片描述][202102081923598.jpg_pic_center] 组件化的基本使用步骤： 1、创建组件构造器对象 2、注册组件

水深无声/ 2022年10月29日 05:23/ 0 赞/ 210 阅读

相关【Vue】—Vue组件基本介绍

【Vue】—Vue组件基本介绍 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

柔情只为你懂/ 2022年09月03日 05:09/ 0 赞/ 273 阅读

相关 Vue组件化应用构建

组件化应用构建组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽

小鱼儿/ 2021年10月19日 23:54/ 0 赞/ 426 阅读

相关 Vue.js 组件化开发

三、组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件

悠悠/ 2021年09月07日 10:16/ 0 赞/ 414 阅读

相关 Vue组件化

一点睛通过定义组件就可以通过组件名组件标签进行组件模板复用。二代码 <!DOCTYPE html> <html lang="en">

分手后的思念是犯贱/ 2021年07月25日 02:52/ 0 赞/ 498 阅读