爲何要用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>
複製代碼