为何要用Vue.js的组件化开发

时间 2019-12-05

标签为何 vue.js vue 组件开发栏目 JavaScript 繁體版

原文原文链接

那么什么是Vue组件呢？它是vue.js最强大的功能之一，是可扩展的html元素，是封装可重用的代码，同时也是Vue实例，能够接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子。这么说我相信不少人都理解了。html

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让咱们可使用独立可复用的小组件来构建大型应用，任意类型的应用界面均可以抽象为一个组件树：vue

那么什么是组件呢？ 组件能够扩展HTML元素，封装可重用的HTML代码，咱们能够将组件看做自定义的HTML元素。浏览器

使用组件的好处？bash

提升开发效率app

方便重复使用函数

简化调试步骤学习

提高整个项目的可维护性ui

便于多人协同开发this

如何注册组件？spa

须要使用Vue.extend方法建立一个组件，而后使用Vue.component方法注册组件。Vue.extend方法格式以下

var MyComponent = Vue.extend({
    // 选项...后面再介绍
})
复制代码

若是想要其余地方使用这个建立的组件，还得个组件命个名：

Vue.component('my-component', MyComponent)
复制代码

命名以后便可在HTML标签中使用这个组件名称，像使用DOM元素同样。下面来看看一个完整的组件注册和使用例子。

//html代码：
<div id="example">
    <my-component></my-component>
</div>
//js代码：
// 定义
var MyComponent = Vue.extend({
    template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 建立根实例
new Vue({
    el: '#example'
})
复制代码

输出结果为：

<div id="example">
    <div>A custom component!</div>
</div
复制代码

组件之间的通讯 父组件要给子组件传递数据，

子组件须要将它内部发生的事情告诉父组件(利用事件的订阅发布模式)

1.给子组件的template上的元素绑定事件（如click），执行子组件的方法（如changeData），子组件的方法中发射一个事件（如s），传一个数据（如lalala）；

2.父组件中，定义一个方法（如getData）用来拿到子组件的数据。

3.在自定义的组件上绑定子组件传过去的事件（s），执行事件（s）执行的是getData函数，getData函数中拿到数据（data，就是子组件传过去的lalala）数据同步

<div id="app">
<parent></parent>
</div>
<template id="parent">
<div>
    <h1>父组件 <mark>{{msg.name}}</mark></h1>
    <children :n="msg"></children>
</div>
</template>
<template id="children">
    <h2 @click="changeData">子组件 {{n.name}}</h2>
</template>
<script>
    //数据同步的核心：父组件给子组件传递“引用数据类型的数据”；
    var app=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#parent',
                data(){
                    return {msg:{name:'hahha'}}
                },
                components:{
                    children:{
                        props:['n'],
                        template:'#children',
                        methods:{
                            changeData(){
                                this.n.name='lallala'
                            },
                        }
                    }

                }
            }
        }
    })
</script>//
复制代码

数据不一样步(不直接使用父组件传的值，用data属性再本身的组件内作一个中间变量，防止报错)

<parent></parent>
</div>
<template id="parent">
<div>
    <h1>父组件 <mark>{{msg}}</mark></h1>
    <children :n="msg"></children>
</div>
</template>
<script>
    //数据不一样步的核心：中间变量接收避免报错；
    var app=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#parent',
                data(){
                    return {msg:'hahha'}
                },
                components:{
                    children:{
                        props:['n'],
                        template:'<h2 @click="changeData">子组件 {{b}}</h2>',
                        data(){
                            return {b:this.n}
                        },
                        methods:{
                            changeData(){
                                this.b='lallala'
                            },
                        }
                    }
                }
            }
        }
    })//欢迎加入全栈开发交流群一块儿学习交流：864305860
</script>
复制代码

组件中的data必须是函数

每一个组件都是互相独立的，若是它们共用一个对象，

在更改一个组件数据的时候，会影响其它组件，若是是函数的话，

每一个组件都有都是又本身独立的数据，互相不会影响。

受限制的元素

Vue在浏览器解析和标准化HTML后才能获取模板内容，因此有些元素限制了能被它包裹的元素。

例如：ul中只能放li；select中只能放option

某些元素中放入了自定义元素，

不符合W3C标准，最终会解析错误。

关于DOM模板的解析

当使用 DOM 做为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，由于 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤为像这些元素

，
，，