Vue组件封装的过程[通俗易懂]

Vue组件封装的过程[通俗易懂]Vue组件封装的过程vue组件的定义组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能某些情况下,组件也可以表现用`js`特性进行了扩展的原生的HTML元素 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子函数vue组件的功能能够把页面抽象成多个相对独立的模块实现代码重用,提高开发效率和代码

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

Vue组件封装的过程

vue组件的定义

  1. 组件(Component)是Vue.js最强大的功能之一
  2. 组件可以扩展HTML元素,封装可重用代码
  3. 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能
  4. 某些情况下,组件也可以表现用 `js` 特性进行了扩展的原生的HTML元素
  5. 所有的Vue组件同时也都是Vue实例,所以可以接受 相同的选项对象(除了一些根级特有的选项),并提供 相同的生命周期钩子函数

vue组件的功能

  1. 能够把页面抽象成多个相对独立的模块
  2. 实现代码重用,提高开发效率和代码质量,使得代码易于维护

Vue组件封装过程

  1. 首先,使用Vue.extend()创建一个组件
  2. 然后,使用Vue.component()方法注册组件
  3. 接着,如果子组件需要数据,可以在props中接受定义
  4. 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法

组件使用流程详细介绍

1、组件创建—有3中方法,extend()
< template id=’’>
< script type=‘text/x-template’ id=’’>

  • A、调用Vue.extend(),创建名为myCom的组件,template定义模板的标签,模板的内容需写在该标签下
  • 
    var myCom = Vue.extend({
        template: '<div>这是我的组件</div>'
    })
    
  • B、标签创建,需要加上id属性
  • 
    <template id="myCom">
        <div>这是template标签构建的组件</div>
    </template>
    

    C、< script type=‘text/x-template’ id=‘myCom’>,
    需加id属性,同时还得加 type=“text/x-template”,
    加这个是为了告诉浏览器不执行编译里面的代码

    <script type="text/x-template" id="myCom1"> <div>这是script标签构建的组件</div> </script>
    

    2、注册组件—-有2中方法,全局注册,局部注册

  • A1、全局注册:一次注册( 调用Vue.component( 组件名称,为组件创建时定义的变量 ) ),可在多个Vue实例中使用。
  • 我们先用全局注册,注册上面例子中创建的myCom组件
    Vue.component('my-com',myCom)
    

    A2、全局注册语法糖:不需要创建直接注册的写法

    Vue.component('my-com',{
        'template':'<div>这是我的组件</div>'
    })
    

    ‘my-com’为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。

    A3、如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值

    Vue.component('my-com',{
        template: '#myCom'
    })
    

    B1、局部注册:只能在注册该组件的实例中使用,一处注册,一处使用

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': myCom
        }
    })
    

    B2、局部注册语法糖:

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': {
               template: '<div>这是我的组件</div>'
            }
        }
    })
    

    B3、< template>及< script>创建的组件,局部注册

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': {
               template: '#myCom'
            }
        }
    })
    

    3、调用组件

    只需要在调用组件的地方,写上组件名字的标签即可

    <div>
        /*调用组件*/
        <my-com></my-com>
    </div>
    

    案例:

    A、全局注册:新建一个html文件,引入vue.js,并且定义2个vue实例app1和app2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
        </div>
        <div id="app2">
            <my-com></my-com>
        </div>
     
        <script> /*创建组件*/ var myCom = Vue.extend({ 
           template: '<div>这是我的组件</div>' }); /*全局注册组件*/ Vue.component('my-com',myCom); /*定义vue实例app1*/ var app1 = new Vue({ 
           el: '#app1' }); /*定义vue实例app2*/ var app2 = new Vue({ 
           el: '#app2' }); </script>
    </body>
    </html>
    

    显示效果:

    在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190083.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python核心编程

    python核心编程1:正则表达式:正则表达式是包含文本和特殊字符的字符串,该字符串描述一个可以识别各种字符串的模式[A-Za-z]\w+的含义是第一个字符是字母,也就是说要么A~Z,要么a~z,后面是至少一个(+)

  • activemq常见面试题(jvm面试题总结及答案)

    是什么消息中间件。可以在分布式系统的不同服务之间进行消息的发送和接收它的出现解决了什么问题可以让系统解耦 比如:使用消息中间件,某一个服务,可能依赖了其他好几个服务。比如课程里面的运营商后台依赖了4个服务,那不用mq就和4个服务耦合,用了mq,就只和1个mq耦合。参考下图: 实际项目应用场景监听商品添加消息,接收消息,将对应的商品信息同步到索引库 每次添加完商品…

  • hdu 4885 TIANKENG’s travel(bfs)

    hdu 4885 TIANKENG’s travel(bfs)

  • 阿里云centos镜像下载

    阿里云centos镜像下载下载地址:http://mirrors.aliyun.com/centos/这个界面提供了centos各个版本的目录,不过,点入具体的目录去只有一个readme文件,而没有镜像下载。readme文件中提供了精确版本的下载地址:http://vault.centos.org/,以6.8版本为例,可以根据信息一步一步找到需要的镜像文件这个地址是可以下载的,不过下载速度相对比较慢,针对网络比较差的环境,下载这个镜像简直就是折磨。回到最开始的阿里云镜像目录,点击7和8的根目录可以找到相关的镜像通过目录iso

  • Adaptive thresholding using the integral image

    Adaptive thresholding using the integral image#include #include #include#includeusingnamespacestd; voidvvAdaptiveThreshold(IplImage*inImg,IplImage*outImg){intS=inImg->width>>5;intT=10;char*input,*bin;

  • lib vs 生成pdb_pdb文件 VS c++编译[通俗易懂]

    lib vs 生成pdb_pdb文件 VS c++编译[通俗易懂]使用VS-debug模式下编译的时候,经常出现以下问题:’Dlib.exe'(Win32):Loaded’D:\c++\Dlib\x64\Debug\Dlib.exe’.Symbolsloaded.’Dlib.exe'(Win32):Loaded’C:\Windows\System32\ntdll.dll’.CannotfindoropenthePDBfile.’Dl…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号