VUE组件简明讲解

目录
  • 前言
  • 一、全局组件
    • 1、定义
    • 2、全局组件调用
  • 二、局部组件
    • 1、定义
    • 2、局部组件调用

前言

为什么vue就开始在前几年就流行并且实用起来了？这主要的是因为由于vue的一个最强大的功能就是vue的组件，vue的组件到底有什么强大的功能呢？原因有两个，一个是组件的复用性很高；另一个是可以减少重复性的开发。

一、全局组件

1、定义

全局组件的语法是：vue.component（‘组件名’，{配置选项}）；

然后，我们进一步理解一下，组件名应该怎么定义：组件名的定义规则是，使用短横线分隔命名，字母小写并且还需要一个连字符。配置选项对象：创建的配置选项的对象和new Vue创建的配置的实例接收相同的选项对象，这些对象属性里面有：data、computed、methods等等

一个组价可以预定义很多选项，最核心的是一下两个

结构模板template

这个模板声明了数据䄦最终显示给用户的DOM之间的映射关系。但是要注意的是，该结构模板中，只能有一个根节点。

初始数据data

data可以定义组件的初始数据，和newVue的data选项的定义不一样，组件是可以复用的，所以数据要定义成私有的转态，打data定义成一个函数，并且要求返回一个函数对象。

2、全局组件调用

说了那么多理论的东西，可能不了解，那我我们上代码。全局组件在全局都是可以调用的，调用的方式跟标签的调用方式是一样的，只需要将标签名改成组件名就可以了。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件</title>
</head>
<body>
    <div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
    </div>
    <div id="app1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
Vue.component('button-counter',{
   template:`<button v-on:click="add">您在这里按下了{{count}}次！</button>`,
   data:function(){
    return{
        count:0
    }
   },
   methods:{
    add:function(){
        this.count++
    },
   }
});
var  vml = new Vue({
    el:"#app",
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

运行结果：

在代码这个中，button-counter已经是全局组件，可以在vm1和vm2挂载使用，在其范围之内都可使用。组件定义后可以进行多从的使用，在vue实例vm1和vm2的挂载范围分别地道用了两次组件，而且组件间数据都是相互独立，不管不按哪一个按钮都是互相不受不影响的。

二、局部组件

1、定义

局部组件的定义是：定义在vue实例上面的，在哪一个实例上面的定义，就在哪个实例所挂载的区域里面进行使用。

使用的配置项component，一个实例可以进行配置多个组件，多个组件配置在一个对象中。局部组件只有在定义在它的实例挂载的区域内进行使用，而且调用的方法和全局组件调用的方法是如出一辙的。

2、局部组件调用

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件</title>
</head>
<body>
    <div id="app">
        <!-- 头部，你随意定，你写中文拼音都可以 -->
<top></top>
<!-- 中部 -->
<middle></middle>
<!-- 尾部 -->
<bottom></bottom>
    </div>
    <div id="app1">
        <top></top>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vml = new Vue({
    el:"#app",
    components:{
        "top":{
            template:`<div>
                <h3>头部标题</h3>
                <p>12121212</p>
                </div>`
        },
        "middle":{
            template:`<div>
                <h3>中部题目</h3>
                <p>10086</p>
                </div>`
        },
        "bottom":{
            template:`<div>
                <h3>尾部题目</h3>
                <p>欢迎来到丘比特的博客</p>
                <p>QQ:2237814512</p>
                </div>`
        },
    }
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

运行结果：

在实例中我们定义了头中尾三个组件，在vm1挂载的#app区域里面可以使用这三个组件 ,但是在#app1不可以使用。我们可以看到vm1挂载的#app区域内调用的三个组件可以显示出来，但是在vm2挂载的#app1区域内调用的top组件没有被渲染，我们打开console可以看到错误，在元素element可以看到被解释的代码。

到此这篇关于VUE组件简明讲解的文章就介绍到这了,更多相关VUE组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue动态组件component标签的用法大全

    Vue动态组件component标签的用法大全

    目录 简介 说明 官网网址 示例 路由设置 父组件 子组件 简介 说明 本文介绍Vue的动态组件的用法. 在Vue中,可以通过component标签的is属性动态指定标签,例如: <component :is="componentName"></component> 此时,componentName的值是什么,就会引入什么组件. 官网网址 https://v2.cn.vuejs.org/v2/guide/components.html#动态组件 示例 路由设置

  • 详解Vue注册组件的方法

    目录 简介 说明 官网网址 组件名字 全局注册(一般用于框架) 局部注册(不常用) 模块系统 在模块系统中局部注册(常用) 基础组件的自动化全局注册 简介 说明 本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字 注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com

  • 老生常谈vue3组件通信方式

    目录 vue3七种组件通信方式 1. Props方式 2. emit方式 3. v-model方式 4.Refs 5. provide/inject 6. eventBus 7. vuex/pinia vue3七种组件通信方式 面试题经常会问到vue3组件间的通信方式,下文列举了七种常见的通信方式. props emit v-model refs provide/inject eventBus Vuex4/pinia(vuex5) 1. Props方式 父组件以数据绑定的形式声明要传递的数据,子

  • Vue动态组件与内置组件浅析讲解

    Vue动态组件与内置组件浅析讲解

    目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间

  • VUE组件简明讲解

    VUE组件简明讲解

    目录 前言 一.全局组件 1.定义 2.全局组件调用 二.局部组件 1.定义 2.局部组件调用 前言 为什么vue就开始在前几年就流行并且实用起来了?这主要的是因为由于vue的一个最强大的功能就是vue的组件,vue的组件到底有什么强大的功能呢?原因有两个,一个是组件的复用性很高:另一个是可以减少重复性的开发. 一.全局组件 1.定义 全局组件的语法是:vue.component(‘组件名’,{配置选项}): 然后,我们进一步理解一下,组件名应该怎么定义:组件名的定义规则是,使用短横线分隔命名,

  • vue组件初学_弹射小球(实例讲解)

    1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 } 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向: isYtrue为true则小球为纵坐标正方向 3

  • vue组件讲解(is属性的用法)模板标签替换操作

    vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样 <div class="language-html"> <ul> <li is="row"></li> </ul> </div> 这样会保证dom结构在浏览器的正常渲染,尽量避免在不正确的结构中直接使用组件 <script> Vue.com

  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    目录 前言 一.父级传数据给子级 1.传输固定的具体数据 2.动态语法 3.子组件调用父组件 二.子级传数据给父级 1.使用自定义事件 2.$refs的使用 3.同级别组价以及任意组件之间的数据传递 前言 在前面,我们已经了解了vue的组件以及vue组件之间的层级关系,这个在博主的往期博客,感兴趣的可以往前挪,地址是: 1.vue组件 2.vue组件的层级关系 本文主要编写记录的是,组件之间的通信的模式以及通信的方式,我们的组件之间只能调用自己的属性和自己的方法,不能调用其他组件的属性以及方法,

  • VUE组件传参超详细讲解

    VUE组件传参超详细讲解

    目录 Vue.cli 中怎样使用自定义的组件 Vue 组件如何进行传值的 父组件向子组件传递数据 子组件向父组件传递数据 非父子组件之间传递数据 父传子例子 子传父例子 Vue组件data为什么必须是函数 组件的命名规范 Vue 组件里的定时器要怎么销毁 Vue.cli 中怎样使用自定义的组件 第一步:在 components 目录新建你的组件文件(CounterCom.vue),script一定要export default {} 第二步:在需要用的页面(组件)中导入: import Coun

  • Vue组件与生命周期详细讲解

    目录 写在前面 生命周期 图解 总结 写在前面 Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统.vue实例在渲染成html的时候往往要经过以下的步骤: 读取数据和方法,设置数据绑定和监听 解析template 将实例挂载到Dom,并将实例状态和视图绑定,在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改. 生命周期 beforeCreate vue实例初始化,数据监听和方法属性挂载之前调用 created 数据监听和方法属性挂载之后调用,是最

  • Vue组件生命周期三个阶段全面总结讲解

    目录 组件生命周期 创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 运行阶段 beforeUpdate阶段 updated阶段 销毁阶段 beforeDestroy阶段 destroyed阶段 总结 组件生命周期 生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before

  • Vue组件通信之父传子与子传父详细讲解

    目录 父组件传递给子组件 浅谈Props 子组件传递给父组件 父组件传递给子组件 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props来完成组件之间的通信 通过props来完成组件之间的通信 浅谈Props 那么什么是Props呢? 作用:接受父组件传递过来的属性 Props是你可以在组件上注册一些自定义的attribute(属性): 父组件给这些attribute(属性)赋值,子组件

  • vue组件watch属性实例讲解

    本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div i

随机推荐