龙空技术网

vuejs 中组件实现

zidea 228

前言:

现在兄弟们对“js自定义组件”大体比较着重,小伙伴们都需要了解一些“js自定义组件”的相关知识。那么小编也在网摘上收集了一些有关“js自定义组件””的相关知识,希望兄弟们能喜欢,朋友们一起来了解一下吧!

组件化

组件化是任何一个框架必须实现,如何将定义组件(js 对象)转化为 dom 对象,以及组件的属性转换为 dom 属性,这是每一个前端框架在设计时需要认真思考和设计的问题。

const vm= new Vue({    el:'#root',    data:{},    props:{},    methods:{},    watch:{},    computed:{},    template:"...",    components:{},});

昨天写 react,今天朋友让我来谈谈 vue,个人对于 vue 了解并不多。先接触的 angular 随后是 react ,vue 是这两年市场推动不得不也看一看 vue。最近听了 Evan 关于 vue3 介绍,vue3 还是很吸引人,一堆提高性能的优化。

按作用域范围区域性(具有作用域)注册组件

其实渲染出来并不是 javascript 提供自定义组件而是一个 div

所谓区域(作用域)注册中区域指的就是这些元素父级元素<div id="app">

    <div id="app">        <zi-comp></zi-comp>        <zi-comp></zi-comp>        <zi-comp></zi-comp>    </div>    <div id="app2">        <zi-comp></zi-comp>    </div>

这样在 app2 作用域内是无法识别到在 app 作用域注册的组件 zi-comp

关于组件中 data 的属性

这里有一个我们需要注意的,也是我们对 vue 设计理念有点 confusing 的。data 属性值是一个函数返回一个对象,而不是直接接收一个对象作为 data 的属性值。

<!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">    <script src=";></script>    <title>Document</title></head><body>    <div id="app">{{msg}}<zi-comp></zi-comp>    </div>    <script>        Vue.component('zi-comp', {            template: '<div class="comp">{{msg}}</div>',            data: function () {                return {                    msg: "A custom component of Vue"                }            }        });        new Vue({            el: "#app",            data: {                msg: 'A root msg of Vue'            }        });    </script></body></html>

在组件中对 data 属性

            data: function () {                return {                    msg: "A custom component of Vue"                }            }

为什么会这样,可以简单思考一下,因为在 javascript 语言中没有大括号的作用域,最小作用域范围就是函数,如果没有通过 function 来限制数据 data 作用范围,data 就会把全局 data 覆盖掉,就这么简单。

大家可以通过运行下面的代码来观察问题,以及我们为什么要在 data 属性通过一个函数返回值来给 data 属性赋值的原因。

<!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">    <script src=";></script>    <title>Document</title>    <style>        .container {            width: 100vw;            height: 50vh;            display: flex;            justify-content: center;            align-items: center;            flex-direction: column;        }        .comp {            height: 48px;            background: dodgerblue;            padding: 12px 24px;            display: flex;            color: white;            font-size: 1.2em;            margin-bottom: 6px;            justify-content: center;            align-items: center;        }    </style></head><body>    <div id="app" class="container">        <zi-comp></zi-comp>        <zi-comp></zi-comp>        <zi-comp></zi-comp>        <zi-comp></zi-comp>        <zi-comp></zi-comp>    </div>    <script>        var data = {            count: 0        }        Vue.component('zi-comp', {            template: '<div class="comp"><span>{{count}}</span> <button @click="count++">add</button> </div>',            data: function () {                return data;            }        });        new Vue({            el: "#app"        });    </script></body></html>

通过修改 zi-comp 的 data 属性,返回一个对象,这样 count 属性就不会覆盖外面属性,这时的 count 只属于该 zi-comp 组件实例化对象的 count。通过这个示例我想大家可能对为什么在 vue 的组件定义数据 data 属性时,需要提供函数然后在其中将数据对象返回原因了吧。

Vue.component('zi-comp', {            template: '<div class="comp"><span>{{count}}</span> <button @click="count++">add</button> </div>',            data: function () {                return {                    count:0                };            }        });

模板文件

在 vue 中,避免大家在 vue 对象中的 template 写一些复杂 html 结构,vue 和其他框架一样提供在 vue 外部写 html 模板,然后在 vue 对象通过模板 id 来引用模板的方式来写模板。

<body>    <div id="app">        <zi-comp></zi-comp>    </div>    <script type="text/x-template" id="zi-comp">        <div class="comp">A custom component of Vue!</div>    </script>    <script>        //register        Vue.component('zi-comp', {            template: "#zi-comp"        });        new Vue({            el: "#app"        });    </script></body>

标签: #js自定义组件