组件分为

  • 全局组件

  • 局部组件

    全局组件

  • // 语法---Vue.component('组件名', {组件参数})
    
Vue.component('com1', {
    
    template: '<button @click="count++">你点了我{{count}}次</button>',
    
    data() {
    
        return {
    
            count: 0
    
        }
    
    }
    
})

    示例：

    <!DOCTYPE html>
    
<html lang="en">

<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>我是测试vue</title>
    
    <!-- 01-引入vue -->
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    
</head>

<body>
    
    <!-- 02创建一个div，ID为app -->
    
    <div id="app"> <!-- 02-使用组件 --><com></com>
    
    </div>
    
    <script>//01-创建全局组件
    
        Vue.component('com', {
    
            template: '<button @click="add">你点击了我{{count}}次</button>',
    
            data() {
    
                return {
    
                    count: 0
    
                }
    
            },
    
            methods: {
    
                add() {
    
                    this.count++
    
                }
    
            }
    
        })
    
        const vm = new Vue({
    
            el: '#app',//对应的操作区，必填
    
            data: {
    
                msg: ''
    
            },//数据
    
            methods: {}//方法
    
        });
    
    </script>
    
</body>

</html>

    说明：

    • 组件没有el参数, 原因是组件不会和具体的页面元素绑定

    • 组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html

    • 组件也是一个Vue的实例, 所以在组件中也有data/methods等

    • data必须是一个函数, 并返回一个对象

    局部组件

    1. 组件的html部分是在template标签中渲染

    2. 组件的js部分就是组件参数(对象)

    示例：

    <!DOCTYPE html>
    
<html lang="en">

<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    
</head>

<body>
    
    <div id="app">
    
        <!-- 04-使用组件 -->
    
        <son></son>
    
        <abc></abc>
    
    </div>

    <!-- 02-局部组件的样式在这里实现 -->
    
    <template id="jubu">
    
        <div>
    
            <button @click="count++">你点击了{{count}}次</button>
    
        </div>
    
    </template>

    <script>
    
        //01-定义局部组件
    
        const jubu = {
    
            template: '#jubu',
    
            data() {
    
                return {
    
                    count: 0
    
                }
    
            },
    
        }

        const vm = new Vue({
    
            el: '#app',
    
            data: {},
    
            methods: {

            },
    
            //03- 挂载局部组件
    
            components: {
    
                // 定义组件---组件名：组件参数对象
    
                son: jubu,
    
                abc: jubu
    
            }
    
        });
    
    </script>
    
</body>

</html>

Vue基础学习 --- 全局组件与局部组件的更多相关文章

  1. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  2. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  3. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  4. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  5. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  6. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  8. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  9. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

随机推荐

  1. Dubbo 高级特性实践-泛化调用

    引言 当后端Java服务用Dubbo协议作为RPC方案的基础,但部分消费方是前端Restful的PHP服务,不能直接调用,于是在中间架设了Router服务提供统一的基于HTTP的后端调用入口. 而Ro ...

  2. spark 机器学习 随机森林 原理(一)

    1.什么是随机森林顾名思义,是用随机的方式建立一个森林,森林里面有很多的决策树组成,随机森林的每一棵决 策树之间是没有关联的.在得到森林之后,当有一个新的输入样本进入的时候,就让森林中的每一棵决策树分 ...

  3. WebStorm 2019激活方法

    1.先下载安装JetBrains WebStorm 2019,安装完成先不要运行2.接下来对软件进行注册破解,首先以记事本的方式打开hosts文件,将代码添加至hosts文件屏蔽软件联网:hosts文 ...

  4. Centos7安装autoconf

    一.原因 安装此插件的原因:在初始化MySQL数据库时出现提示FATAL ERROR: please install the following Perl modules before executi ...

  5. Spring -09 -在Spring工程 中加载 properties 文件 -为某个属性添加注解赋初值

    1.在src 下新建 xxx.properties 文件,不要任意加空格,注明jdbc等标识名!2.在spring 配置文件中先引入xmlns:context,在下面添加2.1如果需要记载多个配置文件 ...

  6. jupytext library using in jupyter notebook

    目录 1. jupytext features 2. Way of using 3. usage 4. installation 1. jupytext features Jupytext can s ...

  7. 题解 洛谷P4302 【[SCOI2003]字符串折叠】

    一眼区间\(dp\),但蒟蒻的我还是调了好久\(qwq\) [状态设置] 设\(f[i][j]\)为子串\([i,j]\)的最短折叠 最后答案为\(f[1][n]\) 废话 [初始化] \(1\) 首 ...

  8. 《代码敲不队》第九次团队作业：Beta冲刺第3天

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 (1)项目文档的完善与整理:(2)团队项目总结陈述PPT编制:(3)符合 ...

  9. 评估预测函数(1)---算法不能达到我们的目的时，Deciding what to try next

    在设计机器学习系统时,一些建议与指导,让我们能明白怎么选择一条最合适,最正确的道路. 当我们要开发或者要改进一个机器学习系统时,我们应该接下来做些什么? try smaller sets of fea ...

  10. TortoiseGit-下载安装汉语语言包（汉化-方法）

    TortoiseGit是一款版本控制软件,和git bash是差不多的, 但是TortoiseGit是图形界面,git bash却是命令界面,但是, 我更新了TortoiseGit后,记得明明选择了汉 ...