Vue组件创建、渲染、注册及注册优化操作是什么-群英

Vue组件创建、渲染、注册及注册优化操作是什么

Admin发表于 2022-11-19 17:51:05352 次浏览

这篇文章给大家介绍了“Vue组件创建、渲染、注册及注册优化操作是什么”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“Vue组件创建、渲染、注册及注册优化操作是什么”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

组件的创建

创建组件用Vue.extend()

创建的组件不要写el因为最终所有的组件都要被vm管理，由vm决定服务的对象

date不能写对象形式而是写成函数形式，且其中一定要return一个对象

// 创建一个组件
const school=Vue.extend({
    // 配置template，里面存放的是通过当前组件中的内容生成的标签，最终会作为模板在页面中解析出来
    template:`
            <!--最外层为template必须具有的根标签-->
            <div>
                <!--div中的标签会在页面中使用到该组件的地方解析并显示出来，那么name就是此组件中                    
                  data中配置的name，adress同理-->
                <h1>我的名字:{{name}}</h1>
                <h2>地址:{{adress}}</h2>
            </div>`,
   // 配置date
      data(){
        return{
            name:'z',
            adress:'earth'            
             }
        }
})
 登录后复制

注意：在全局环境下使用Vue.entend({})创建的组件，在不使用Vue.component('组件名',最终组件名)声明时，就是局部组件，不可以被其他vm实例使用，如果使用了Vue.component创建的组件时为全局组件（Vue.entend可以省略，直接const 组件名={ }）

组件的渲染

当组件注册完成之后，在页面中vm服务的el内使用，使用方式就是将最终组件名作为一个标签放到想要的位置等待浏览器解析即可

const vm=new Vue({
        el:'root',
        components:{
            // 注册组件
            sl:school
            }
        })
 登录后复制

页面中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 用组件标签将想用的组件放到页面上,那么组件中template属性中的标签就会在这个位置被解析出来-->
        <sl></sl>
    </div>
</body>
</html>
 登录后复制

总结：vm实例相当于起了一个桥梁作用，使得组件中的内容最终会被展现在页面上，这样提高了代码的利用率，当我们需要重复使用某一个内容时，可以直接找到这个内容所在的组件，然后将组件注册到实例上即可在页面中展示。

Vue的组件注册

1、全局注册：当Vue创建，组件就会被加载，不管该组件使不使用，都会被加载【占内存】【入门程序】

2、局部注册：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建

创建vm，配置el（决定components中的组件为谁服务）

配置components对象，其中元素以key，value存储，key是在当前实例中的组件名（最终组件名）,value是我们在全局环境下配置的组件名

全局注册

    Vue.component("button-a",{
        template:"\n" +
            "    <button @click=\"count++\">{{count}}</button>",
        data:function () {
            return{
                count:0
            }
        },
        methods:{

        }
    })
 登录后复制

局部注册

    let componentA = {
        template:"\n" +
                "    <button @click=\"count++\">{{count}}</button>",
            data:function () {
                return{
                    count:0
                }
            },
            methods:{
 
            }
    }
    new Vue({
        el:"#app",
        components:{
            "component-a":componentA,
        }
    })
 登录后复制

关于data为什么是一个函数

组件注册优化

在组件中编写html结构时，来回复制黏贴，非常麻烦，也很占内存。解决办法是在html里用模板编写，并且和js分离

1、模板需要写在template标签中，template标签写在容器外部

2、在template标签中只能有一个根标签

<body>
    <div id="app">
        <button-color></button-color>
    </div>
    <template id="cId">
        <div>
            <h1>组件</h1>
            <h2>阿萨德</h2>
        </div>
    </template>
</body>
</html>
<script>
    let ButtonColor = {
        template:"#cId",
        data:function () {
 
        }
    }
    new Vue({
        el:"#app",
        components:{
            ButtonColor
        }
    })
</script>
 登录后复制

is属性

在html中有一些父子标签，在父标签中只能有特定的子标签【严格规范】【table、ul、ol、dl.....】，如果把子标签封装成组件，在父标签中通过传统方式使用组件，那么会出现显示的效果问题，我们需要通过is进行使用组件

<body>
<div id="app">
   <table>
       <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
       </thead>
       <tbody is="ButtonTable">
 
       </tbody>
       <tfoot>
            <tr>
                <td colspan="3">尾部</td>
            </tr>
       </tfoot>
   </table>
</div>
 
<template id="tId">
    <tbody>
        <tr>
            <td>1</td>
            <td>阿斯顿</td>
            <td>26</td>
        </tr>
    </tbody>
</template>
 
<script>
    let ButtonTable = {
        template:"#tId",
 
    }
    new Vue({
        el:"#app",
        components:{
            ButtonTable
        }
    })
</script>
</body>
 登录后复制

组件嵌套

在一个组件中使用另一个组件

<body>
    <div id="app">
        <base-color></base-color>
    </div>
    <template id="color">
        <div>
            <h1>这是父组件</h1>
            <base-colo1></base-colo1>
        </div>
    </template>
    <template id="color1">
        <h1 style="color: red">这是子组件</h1>
    </template>
</body>
</html>
<script>
    // //创建子组件
    let BaseColo1 ={
        template:"#color1",
 
    }
    //创建父组件
    let BaseColor ={
        template:"#color",
        components:{
            BaseColo1
        }
    }
    new Vue({
        el:"#app",
        components:{
            BaseColor
        }
    })
</script>
 登录后复制

组件通讯

1.声明属性

在子组件中通过声明props属性来接收数据

    // //创建子组件
    let BaseColo1 ={
        template:"#color1",
        props:["msg"]
    }
 登录后复制

2.传递数据

在父组件中使用子组件时，使用v-bind进行传递数据

    <div>
        <base-colo1 :msg = "message"></base-colo1>
    </div>
 登录后复制

3.在子组件中使用接收到的数据

<h2>{{msg}}</h2>

以上就是关于Vue组件创建、渲染、注册及注册优化操作是什么的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，想要了解更多，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： Vue组件

上一篇： Vue怎样创建响应式数据对象，有几种方式

下一篇：为何要vue懒加载，实现方式有哪些