快捷導(dǎo)航

VUE組件簡(jiǎn)明講解

更新時(shí)間：2022年08月29日 10:33:37 作者：丘比特懲罰陸

組件是什么？組件是用基礎(chǔ)的元素組成的復(fù)雜的、可以重復(fù)使用的代碼單元，就相當(dāng)于疊疊樂(lè)一樣的快件，可以將這些復(fù)用的代碼封裝其起來(lái)構(gòu)成的組件可需要的時(shí)候進(jìn)行調(diào)用

前言

為什么vue就開(kāi)始在前幾年就流行并且實(shí)用起來(lái)了？這主要的是因?yàn)橛捎趘ue的一個(gè)最強(qiáng)大的功能就是vue的組件，vue的組件到底有什么強(qiáng)大的功能呢？原因有兩個(gè)，一個(gè)是組件的復(fù)用性很高；另一個(gè)是可以減少重復(fù)性的開(kāi)發(fā)。

一、全局組件

1、定義

全局組件的語(yǔ)法是：vue.component（‘組件名’，{配置選項(xiàng)}）；

然后，我們進(jìn)一步理解一下，組件名應(yīng)該怎么定義：組件名的定義規(guī)則是，使用短橫線分隔命名，字母小寫(xiě)并且還需要一個(gè)連字符。配置選項(xiàng)對(duì)象：創(chuàng)建的配置選項(xiàng)的對(duì)象和new Vue創(chuàng)建的配置的實(shí)例接收相同的選項(xiàng)對(duì)象，這些對(duì)象屬性里面有：data、computed、methods等等

一個(gè)組價(jià)可以預(yù)定義很多選項(xiàng)，最核心的是一下兩個(gè)

結(jié)構(gòu)模板template

這個(gè)模板聲明了數(shù)據(jù)?最終顯示給用戶(hù)的DOM之間的映射關(guān)系。但是要注意的是，該結(jié)構(gòu)模板中，只能有一個(gè)根節(jié)點(diǎn)。

初始數(shù)據(jù)data

data可以定義組件的初始數(shù)據(jù)，和newVue的data選項(xiàng)的定義不一樣，組件是可以復(fù)用的，所以數(shù)據(jù)要定義成私有的轉(zhuǎn)態(tài)，打data定義成一個(gè)函數(shù)，并且要求返回一個(gè)函數(shù)對(duì)象。

2、全局組件調(diào)用

說(shuō)了那么多理論的東西，可能不了解，那我我們上代碼。全局組件在全局都是可以調(diào)用的，調(diào)用的方式跟標(biāo)簽的調(diào)用方式是一樣的，只需要將標(biāo)簽名改成組件名就可以了。

代碼實(shí)例：

<!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">您在這里按下了{(lán){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>

運(yùn)行結(jié)果：

在代碼這個(gè)中，button-counter已經(jīng)是全局組件，可以在vm1和vm2掛載使用，在其范圍之內(nèi)都可使用。組件定義后可以進(jìn)行多從的使用，在vue實(shí)例vm1和vm2的掛載范圍分別地道用了兩次組件，而且組件間數(shù)據(jù)都是相互獨(dú)立，不管不按哪一個(gè)按鈕都是互相不受不影響的。

二、局部組件

1、定義

局部組件的定義是：定義在vue實(shí)例上面的，在哪一個(gè)實(shí)例上面的定義，就在哪個(gè)實(shí)例所掛載的區(qū)域里面進(jìn)行使用。

使用的配置項(xiàng)component，一個(gè)實(shí)例可以進(jìn)行配置多個(gè)組件，多個(gè)組件配置在一個(gè)對(duì)象中。局部組件只有在定義在它的實(shí)例掛載的區(qū)域內(nèi)進(jìn)行使用，而且調(diào)用的方法和全局組件調(diào)用的方法是如出一轍的。

2、局部組件調(diào)用

代碼實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件</title>
</head>
<body>
    <div id="app">
        <!-- 頭部，你隨意定，你寫(xiě)中文拼音都可以 -->
<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>頭部標(biāo)題</h3>
                <p>12121212</p>
                </div>`
        },
        "middle":{
            template:`<div>
                <h3>中部題目</h3>
                <p>10086</p>
                </div>`
        }, 
        "bottom":{
            template:`<div>
                <h3>尾部題目</h3>
                <p>歡迎來(lái)到丘比特的博客</p>
                <p>QQ:2237814512</p>
                </div>`
        },
    }
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

在實(shí)例中我們定義了頭中尾三個(gè)組件，在vm1掛載的#app區(qū)域里面可以使用這三個(gè)組件 ,但是在#app1不可以使用。我們可以看到vm1掛載的#app區(qū)域內(nèi)調(diào)用的三個(gè)組件可以顯示出來(lái)，但是在vm2掛載的#app1區(qū)域內(nèi)調(diào)用的top組件沒(méi)有被渲染，我們打開(kāi)console可以看到錯(cuò)誤，在元素element可以看到被解釋的代碼。

到此這篇關(guān)于VUE組件簡(jiǎn)明講解的文章就介紹到這了,更多相關(guān)VUE組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: