devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2024年Web前端最全Vue封装组件的过程_vue如何封装一个组件，差点挂在第四面歌曲_前端面试 你是如何封装一个组件的

作者：Cpp五条 | 2024-06-11 01:00:38

赞

踩

前端面试 你是如何封装一个组件的

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试题

面试题目录

    /*定义vue实例app2*/
    var app2 = new Vue({
        el: '#app2'
    });
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
```

显示效果：

可以看到，全局注册的组件在实例app1和实例app2中都可以被调用。

B、局部注册：将创建的组件注册到实例app1下

<!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);
        /*局部注册组件*/
        var app1 = new Vue({
            el: '#app1',
            components:{
                'my-com':myCom
            }
        });

        var app2 = new Vue({
            el: '#app2'
        });
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

可以看到只渲染了app1实例下的组件，app2实例虽然调用了该组件，但是因为这个组件没有在其内部注册，也没有全局注册，所以报错说找不到该组件。

C、template 和script标签创建组件

<!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>
        <my-com1></my-com1>
    </div>

    <template id="myCom">
        <div>这是template标签构建的组件</div>
    </template>

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

    <script>
        Vue.component('my-com1',{ //全局注册
            template: '#myCom1'
        });

        var app1 = new Vue({
            el: '#app1',
            components:{
                'my-com':{
                    template: '#myCom'  //局部注册
                }
            }
        });
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

显示效果：

5、异步组件

vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。

当项目比较大型，结构比较复杂时，我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境，使用单文件组件，开发更简单，易上手，尤其是在对组件的处理上。对于原生vue.js，我们就得将组件构建在同一个html的script标签下或者html的外部js中，所有组件集中在一块，不容易管理，这也是原生vue,js的一点不便之处

vue.js可以将异步组件定义为一个工厂函数。

使用$.get获取本地文件会跨域，所以要将项目部署到服务器中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="vue.js"></script>
    <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
</head>
<body>
    <div id="app1">
        <head-com></head-com>
    </div>
    <script>
        Vue.component('head-com', function (resolve, reject) {
            $.get("a.html").then(function (res) {
                resolve({
                    template: res
                })
            });
        });

        var app1 = new Vue({
            el: '#app1'
        });

    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

显示效果如下：

6、Vue中的props数据流

通过在注册组件中申明需要使用的props，然后通过props中与模板中传入的对应的属性名，去取用这些值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="vue.js"></script>
    <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
</head>
<body>
    <div id='app'>
       <my-component name="jiangjiang" come-from="guilin"></my-component>
       <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
    </div>
    <script>
        Vue.component('my-component', {
          props: ['name', 'comeFrom'],    //在注册组件的时候通过props选项声明了要取用的多个prop
          // 在注册组件的模板中使用到props选项中声明的值
          template: '<p>我叫：{{name}}, 我来自：{{comeFrom}}</p>',
          created: function () {
            console.log('在created钩子函数中被调用')
            console.log('我叫：', this.name)
            console.log('我来自：', this.comeFrom)
          }
        })


        new Vue({
          el: '#app'
        })


    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
 

  • 1

注意：

A、props取值的方式

在注册组件的模板内部template，直接通过prop的名称取值就Ok

template: '<p>我叫：{{name}}, 我来自：{{comeFrom}}</p>'

  • 1

不在注册组件的模板内部template，用this.prop的方式

 console.log('我来自：', this.comeFrom)

  • 1

B、在template选项属性中，可以写驼峰命名法，也可以写短横线命名法

在HTML(模板)中，只能写短横线命名法

原因：vue组件的模板可以放在两个地方

a、Vue组件的template选项属性中，作为模板字符串

b、放在.html中[  用script  template标签创建的组件 ]，作为HTML

问题在于HTML不区分大小写，所以在vue注册组件中通用的驼峰命名法，不适用于HTML中的Vue模板，在HTML中写入props属性，必须写短横线命名法（把原来props属性中的每个prop大写换成小写，并且在前面加“-”）

将6中的

    <div id='app'>
       <my-component name="jiangjiang" come-from="guilin"></my-component>
       <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
    </div>

  • 1
  • 2
  • 3
  • 4

改成

    <div id='app'>
       <my-component name="jiangjiang" comeFrom="guilin"></my-component>
       <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
    </div>

  • 1
  • 2
  • 3
  • 4

显示效果，第二个没有显示

异步组件的实现原理；异步组件的3种实现方式—工厂函数、Promise、高级函数

异步组件实现的本质是2次渲染，先渲染成注释节点，当组件加载成功后，在通过forceRender重新渲染

高级异步组件可以通过简单的配置实现loading   resolve   reject   timeout  4种状态

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/701068
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号