VUE組件簡明講解

Posted on by

前言

為什麼vue就開始在前幾年就流行並且實用起來瞭？這主要的是因為由於vue的一個最強大的功能就是vue的組件，vue的組件到底有什麼強大的功能呢？原因有兩個，一個是組件的復用性很高；另一個是可以減少重復性的開發。

一、全局組件

1、定義

全局組件的語法是：vue.component（‘組件名’，{配置選項}）；

然後，我們進一步理解一下，組件名應該怎麼定義：組件名的定義規則是，使用短橫線分隔命名，字母小寫並且還需要一個連字符。配置選項對象：創建的配置選項的對象和new Vue創建的配置的實例接收相同的選項對象，這些對象屬性裡面有：data、computed、methods等等

一個組價可以預定義很多選項，最核心的是一下兩個

結構模板template

這個模板聲明瞭數據䄦最終顯示給用戶的DOM之間的映射關系。但是要註意的是，該結構模板中，隻能有一個根節點。

初始數據data

data可以定義組件的初始數據，和newVue的data選項的定義不一樣，組件是可以復用的，所以數據要定義成私有的轉態，打data定義成一個函數，並且要求返回一個函數對象。

2、全局組件調用

說瞭那麼多理論的東西，可能不瞭解，那我我們上代碼。全局組件在全局都是可以調用的，調用的方式跟標簽的調用方式是一樣的，隻需要將標簽名改成組件名就可以瞭。

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件</title>
</head>
<body>
    <div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
    </div>
    <div id="app1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
Vue.component('button-counter',{
   template:`<button v-on:click="add">您在這裡按下瞭{{count}}次！</button>`,
   data:function(){
    return{
        count:0
    }
   },
   methods:{
    add:function(){
        this.count++
    },
   }
});
var  vml = new Vue({
    el:"#app",
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

運行結果：

在代碼這個中，button-counter已經是全局組件，可以在vm1和vm2掛載使用，在其范圍之內都可使用。組件定義後可以進行多從的使用，在vue實例vm1和vm2的掛載范圍分別地道用瞭兩次組件，而且組件間數據都是相互獨立，不管不按哪一個按鈕都是互相不受不影響的。

二、局部組件

1、定義

局部組件的定義是：定義在vue實例上面的，在哪一個實例上面的定義，就在哪個實例所掛載的區域裡面進行使用。

使用的配置項component，一個實例可以進行配置多個組件，多個組件配置在一個對象中。局部組件隻有在定義在它的實例掛載的區域內進行使用，而且調用的方法和全局組件調用的方法是如出一轍的。

2、局部組件調用

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件</title>
</head>
<body>
    <div id="app">
        <!-- 頭部，你隨意定，你寫中文拼音都可以 -->
<top></top>
<!-- 中部 -->
<middle></middle>
<!-- 尾部 -->
<bottom></bottom>
    </div>
    <div id="app1">
        <top></top>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vml = new Vue({
    el:"#app",
    components:{
        "top":{
            template:`<div>
                <h3>頭部標題</h3>
                <p>12121212</p>
                </div>`
        },
        "middle":{
            template:`<div>
                <h3>中部題目</h3>
                <p>10086</p>
                </div>`
        }, 
        "bottom":{
            template:`<div>
                <h3>尾部題目</h3>
                <p>歡迎來到丘比特的博客</p>
                <p>QQ:2237814512</p>
                </div>`
        },
    }
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

運行結果：

在實例中我們定義瞭頭中尾三個組件，在vm1掛載的#app區域裡面可以使用這三個組件 ,但是在#app1不可以使用。我們可以看到vm1掛載的#app區域內調用的三個組件可以顯示出來，但是在vm2掛載的#app1區域內調用的top組件沒有被渲染，我們打開console可以看到錯誤，在元素element可以看到被解釋的代碼。

到此這篇關於VUE組件簡明講解的文章就介紹到這瞭,更多相關VUE組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：