vue.js組件

有一篇非常棒的關(guān)于vue.js的組件的文章银酬，寫的特別好嘲更，特別清楚，容易理解揩瞪。鏈接：上篇：http://www.cnblogs.com/keepfool/p/5625583.html 下篇：http://www.cnblogs.com/keepfool/p/5637834.html

以下是我學(xué)習(xí)鏈接所對應(yīng)的這兩篇文章的學(xué)習(xí)摘要赋朦。

1.組件的創(chuàng)建和注冊

1.1 創(chuàng)建組件構(gòu)造器（使用Vue.extend({模板})）

var child = Vue.extend({
    template:'<div>This is my first component!</div>'
})

1.2 注冊組件：Vue.component({'組件名',組件構(gòu)造器名})

Vue.component('my-component',myComponent)

1.3 使用組件

new Vue({
    el:'#app'
});

<div id="app">//組件需掛載到對應(yīng)的vue實例的掛載范圍內(nèi)
    <my-component></my-component>
</div>

1.4 全局注冊

eg：

<div id="example">
    <my-component></my-component>
</div>

<script>
//注冊，這種是全局注冊
Vue.component('my-component',{
    template:'<div>A component!</div>'
})
//創(chuàng)建根實例
new Vue({
    el:'#example'
})
</script>

渲染為：

<div id="example">
<div>A component!</div>
</div>

效果圖

1.5 局部注冊

eg：

<div id="example">
    <my-component></my-component>
</div>

<script>
var myComponent = Vue.extend( {
    template: '<div>A component!</div>'
})
new Vue({
    el:'#example',
    components: {
        'my-component':myComponent//用實例選項“components”注冊李破，局部注冊
    }
})
</script>

效果圖

1.3 全局注冊和局部注冊區(qū)分

在new Vue ()中注冊的為局部注冊宠哄，只能掛到id值與new Vue（）中的el值相同的Vue實例，而在new Vue外注冊的為全局注冊的喷屋，可以掛到各個Vue實例琳拨。
eg：

<div id="example">
    <my-component></my-component>
</div>
<div id="example-2">
    <my-component></my-component>//將局部注冊的組件掛到不對應(yīng)的組件上，無法正確顯示
</div>

<script>
var child = {
    template: '<div>A component!</div>'
}
new Vue({
    el:'#example',
    components: {
        'my-component':child//局部注冊的組件
    }
})
</script>

無法正確顯示兩句話

eg：

<div id="example">
    <my-component></my-component>
</div>
<div id="example-2">
    <my-component></my-component>//將全局注冊的組件掛到不同id值的組件上
</div>

<script>
//全局注冊
Vue.component('my-component',{
    template:'<div>A component!</div>'
})
//創(chuàng)建根實例
var vm1 = new Vue({
    el:'#example'
})
var vm2 = new Vue({
    el:'#example-2'
})
</script>

正確地顯示了兩行話

2.父組件和子組件

在一個組件的模板（template）中使用了其他組件屯曹，這兩個組件之間就構(gòu)成了父子關(guān)系狱庇，該組件是父組件，父組件的模板中的組件是子組件恶耽。

子組件只能在父組件的template中使用密任。

創(chuàng)建父組件構(gòu)造器
創(chuàng)建子組件構(gòu)造器
注冊父組件
注冊子組件
使用組件

<div id="app">
    <parent-component>
    </parent-component>
</div>

<script>
//創(chuàng)建父組件構(gòu)造器，模板中使用了子組件<child-component></child-component>
var parent = Vue.extend({
    template:'<div>This is a parent component!and <child-component></child-component></div>'
})
//創(chuàng)建子組件構(gòu)造器
var child = Vue.extend({
    template:'<div>This is a child component!</div>'
})
//注冊父組件和子組件
Vue.component('child-component',child)
Vue.component('parent-component',parent)
//vue實例
new Vue({
    el:'#app'
});
</script>

運行結(jié)果

3.組件注冊語法糖：Vue.js簡化組件注冊的過程

3.1 使用Vue.component()直接創(chuàng)建和注冊組件：

// 全局注冊偷俭，my-component1是標(biāo)簽名稱
Vue.component('my-component1',{
    template: '<div>This is the first component!</div>'
})

var vm1 = new Vue({
    el: '#app1'
})

使用這種方式浪讳，Vue在背后會自動地調(diào)用Vue.extend()。

3.2 在選項對象的components屬性中實現(xiàn)局部注冊：

var vm2 = new Vue({
    el: '#app2',
    components: {
        // 局部注冊涌萤，my-component2是標(biāo)簽名稱
        'my-component2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部注冊淹遵，my-component3是標(biāo)簽名稱
        'my-component3': {
            template: '<div>This is the third component!</div>'
        }
    }
})

4. 使用script或template標(biāo)簽:分離js代碼template中的HTML元素

4.1 使用<script>標(biāo)簽

將原本寫在template的內(nèi)容寫在<script type="text/x-template" id="myComponent"></script>標(biāo)簽中口猜，而組件的template的值為<script>標(biāo)簽的“id”值。
Vue.js根據(jù)template里面的id值透揣，找到對應(yīng)的<script>標(biāo)簽济炎，將標(biāo)簽中的HTML作為模板進行編譯。

注意：使用<script>標(biāo)簽時辐真，type指定為text/x-template须尚，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時會忽略<script>標(biāo)簽內(nèi)定義的內(nèi)容侍咱。

<div id="app">
            <my-component></my-component>
 </div>
 <script type="text/x-template" id="myComponent">
      <div>This is a component!</div>
  </script>
<script> 
        Vue.component('my-component',{
            template: '#myComponent'
        })
        
        new Vue({
            el: '#app'
        })        
</script>

4.2 使用<template>標(biāo)簽

<template id="template選項的值">
//這里是原來寫在template選項中的HTML
</template>

<div id="app">
      <my-component></my-component>
</div>
<template id="myComponent">
      <div>This is a component!</div>
</template>
<script>
     Vue.component('my-component',{
            template: '#myComponent'
        })
        
        new Vue({
            el: '#app'
        })
</script>

建議使用<script>或<template>標(biāo)簽來定義組件的HTML模板耐床。
這使得HTML代碼和JavaScript代碼是分離的，便于閱讀和維護楔脯。

5. 組件的el和data選項

Vue.extend() 或Vue.component()中的data 和el必須是函數(shù)撩轰。
eg：

Vue.component('my-component', {
    data: function(){
        return {a : 1}
    }
})

6.使用props

6.1基礎(chǔ)示例

var vm = new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})

這個vue實例可以看作'my-component'組件的父組件。要使用父組件的數(shù)據(jù)例如'data'就要先在子組件中定義props屬性淤年。在定義屬性的時候用的是駝峰命名钧敞。在使用組件時引用props屬性的內(nèi)容時需要轉(zhuǎn)為 kebab-case（短橫線隔開）命名。
將父組件數(shù)據(jù)通過已定義好的props屬性傳遞給子組件：

<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
//"my-name"對應(yīng)props的"myName","name"對應(yīng)父組件的數(shù)據(jù)"name","my-age"對應(yīng)props的"myAge","age"對應(yīng)父組件的數(shù)據(jù)"age"
</div>

定義子組件的HTML模板：

<template id="myComponent">
    <table>
        <tr>
            <th colspan="2">
                子組件數(shù)據(jù)
            </th>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myName }}</td>//在props屬性中定義麸粮，將父組件對應(yīng)的數(shù)值傳遞過來
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>////在props屬性中定義溉苛，將父組件對應(yīng)的數(shù)值傳遞過來
        </tr>
    </table>
</template>

加上自定義的CSS樣式，最終效果圖如下：

Paste_Image.png

在父組件中使用子組件時弄诲，通過以下語法將數(shù)據(jù)傳遞給子組件：
<child-component v-bind:子組件prop="父組件數(shù)據(jù)屬性"></child-component>

6.2 props的綁定類型

6.2.1 單向綁定

修改父組件的數(shù)據(jù)會影響子組件的數(shù)據(jù)愚战；
修改子組件的數(shù)據(jù)不會影響父組件的數(shù)據(jù)。

6.2.2 雙向綁定

可以在使用子組件時齐遵，使用.sync顯式地指定雙向綁定寂玲，這使得子組件的數(shù)據(jù)修改會回傳給父組件。

<child-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></child-component>

6.2.3 單次綁定

可以使用.once顯式地指定單次綁定梗摇，單次綁定在建立之后不會同步之后的變化拓哟，這意味著即使父組件修改了數(shù)據(jù)，也不會傳導(dǎo)給子組件伶授。

<child-component v-bind:my-name.once="name" v-bind:my-age.once="age"></child-component>

6.3 props驗證

props: {
    data: Array,
    columns: Array,
    filterKey: String
}

這段代碼表示：父組件傳遞過來的data和columns必須是Array類型断序，filterKey必須是字符串類型。

7. 解決IE不支持<template>標(biāo)簽

IE不支持<template>標(biāo)簽糜烹，所以<template>標(biāo)簽中的內(nèi)容在IE瀏覽器中會被顯示出來违诗，所以要將<template>的display設(shè)置為none。

template{
    display: none;
}

8. 使用slot：內(nèi)容分發(fā)

8.1 單個slot

<div id="app">
    <my-component>
        <h1>Hello vue.js!</h1>
    </my-component>
    <my-component></my-component>
</div>
<template id="temp">
    <h2>this is a component!</h2>
    <slot>slot</slot>
</template>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        components:{
            'my-component':{
                template:'#temp',
            }
        }
    })
</script>

<template>標(biāo)簽中的<slot>疮蹦，如果在使用該組件的時候诸迟，組件中包含了其他內(nèi)容，就會替換掉<slot>的內(nèi)容，如果組件沒有包含其他內(nèi)容阵苇，<slot>中的內(nèi)容就會直接顯示壁公。組件中包含的內(nèi)容叫做分發(fā)的內(nèi)容。

Paste_Image.png

8.2 多個slot：指定名字绅项，對應(yīng)slot

<div id="app">
    <my-component>
    <div slot="slot1">
        <h1>Hello slot1!</h1>
    </div>
    <div slot="slot2">
        <h1>Hello slot2!</h1>
    </div>
    <div slot="slot3">
        <h1>Hello slot3!</h1>
    </div>  
    </my-component>
    <my-component></my-component>
</div>
<template id="temp">
    <h2>this is a component!</h2>
    <slot name="slot1">slot1</slot>
    <slot name="slot2">slot2</slot>
    <slot name="slot3">slot3</slot>
</template>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        components:{
            'my-component':{
                template:'#temp',
            }
        }
    })
</script>

Paste_Image.png

運行結(jié)果

9.父子組件之間的訪問

9.1父組件訪問子組件

9.1.1 $children

父組件.$children[i]

9.1.2 $refs

在子組件上使用v-ref指令贮尖，可以給子組件指定一個索引ID：

<template id="parent-component">
    <child-component1 v-ref:cc1></child-component1>
    <child-component2 v-ref:cc2></child-component2>
    <button v-on:click="showChildComponentData">顯示子組件的數(shù)據(jù)</button>
</template>

在父組件中，則通過$refs.索引ID訪問子組件的實例：

showChildComponentData: function() {
    alert(this.$refs.cc1.msg);
    alert(this.$refs.cc2.msg);
}

9.2 子組件訪問父組件

alert(子組件.$parent.msg)

10.自定義事件

10.1 派發(fā)事件$dispatch()

<div id="app">
    <p>Messages: {{ messages | json }}</p>
    <child-component></child-component>
</div>
<template id="child-component">
    <input v-model="msg" />
    <button v-on:click="notify">Dispatch Event</button>
</template>
<script src="js/vue.js"></script>
<script>
    // 注冊子組件
    Vue.component('child-component', {
        template: '#child-component',
        data: function() {
            return {
                msg: ''
            }
        },
        methods: {
            notify: function() {
                if (this.msg.trim()) {
                    this.$dispatch('child-msg', this.msg)
                    this.msg = ''
                }
            }
        }
    })
    // 初始化父組件
    new Vue({
        el: '#app',
        data: {
            messages: []
        },
        events: {
            'child-msg': function(msg) {
                this.messages.push(msg)
            }
        }
    })
</script>

子組件的button元素綁定了click事件趁怔，該事件指向notify方法
子組件的notify方法在處理時，調(diào)用了$dispatch薪前，將事件派發(fā)到父組件的child-msg事件润努，并給該該事件提供了一個msg參數(shù)
父組件的events選項中定義了child-msg事件，父組件接收到子組件的派發(fā)后示括，調(diào)用child-msg事件铺浇。

最后編輯于：2017.12.04 05:20:54

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市垛膝，隨后出現(xiàn)的幾起案子鳍侣，更是在濱河造成了極大的恐慌，老刑警劉巖吼拥，帶你破解...
沈念sama閱讀 210,978評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件倚聚，死亡現(xiàn)場離奇詭異，居然都是意外死亡凿可，警方通過查閱死者的電腦和手機惑折，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 89,954評論 2贊 384
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來枯跑，“玉大人惨驶，你說我怎么就攤上這事×仓” “怎么了粗卜？”我有些...
開封第一講書人閱讀 156,623評論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長纳击。經(jīng)常有香客問我续扔，道長，這世上最難降的妖魔是什么评疗？我笑而不...
開封第一講書人閱讀 56,324評論 1贊 282
?港島之戀（遺憾婚禮）
正文為了忘掉前任测砂，我火速辦了婚禮，結(jié)果婚禮上百匆，老公的妹妹穿的比我還像新娘砌些。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點故事閱讀 65,390評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布存璃。她就那樣靜靜地躺著仑荐，像睡著了一般。火紅的嫁衣襯著肌膚如雪纵东。梳的紋絲不亂的頭發(fā)上粘招，一...
開封第一講書人閱讀 49,741評論 1贊 289
城市分裂傳說
那天，我揣著相機與錄音偎球，去河邊找鬼洒扎。笑死，一個胖子當(dāng)著我的面吹牛衰絮，可吹牛的內(nèi)容都是我干的袍冷。我是一名探鬼主播，決...
沈念sama閱讀 38,892評論 3贊 405
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼猫牡，長吁一口氣：“原來是場噩夢啊……” “哼胡诗！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起淌友，我...
開封第一講書人閱讀 37,655評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤煌恢，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后震庭，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瑰抵，經(jīng)...
沈念sama閱讀 44,104評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,451評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年归薛，在試婚紗的時候發(fā)現(xiàn)自己被綠了谍憔。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,569評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡主籍，死狀恐怖习贫，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情千元，我是刑警寧澤苫昌，帶...
沈念sama閱讀 34,254評論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站幸海，受9級特大地震影響祟身，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜物独，卻給世界環(huán)境...
茶點故事閱讀 39,834評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一袜硫、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧挡篓，春花似錦婉陷、人聲如沸帚称。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,725評論 0贊 21
一樁弒父案秽澳，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽闯睹。三九已至，卻和暖如春担神，著一層夾襖步出監(jiān)牢的瞬間楼吃，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,950評論 1贊 264
情欲美人皮
我被黑心中介騙來泰國打工妄讯，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孩锡，地道東北人。一個月前我還...
沈念sama閱讀 46,260評論 2贊 360
代替公主和親
正文我出身青樓亥贸，卻偏偏與公主長得像浮创，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子砌函，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,446評論 2贊 348

vue.js組件

1.組件的創(chuàng)建和注冊

1.1 創(chuàng)建組件構(gòu)造器（使用Vue.extend({模板})）

1.2 注冊組件：Vue.component({'組件名',組件構(gòu)造器名})

1.3 使用組件

1.4 全局注冊

1.5 局部注冊

1.3 全局注冊和局部注冊區(qū)分

2.父組件和子組件

3.組件注冊語法糖：Vue.js簡化組件注冊的過程

3.1 使用Vue.component()直接創(chuàng)建和注冊組件：

3.2 在選項對象的components屬性中實現(xiàn)局部注冊：

4. 使用script或template標(biāo)簽:分離js代碼template中的HTML元素

4.1 使用<script>標(biāo)簽

4.2 使用<template>標(biāo)簽

5. 組件的el和data選項

6.使用props

6.1基礎(chǔ)示例

6.2 props的綁定類型

6.2.1 單向綁定

6.2.2 雙向綁定

6.2.3 單次綁定

6.3 props驗證

7. 解決IE不支持<template>標(biāo)簽

8. 使用slot：內(nèi)容分發(fā)

8.1 單個slot

8.2 多個slot：指定名字绅项，對應(yīng)slot

9.父子組件之間的訪問

9.1父組件訪問子組件

9.1.1 $children

9.1.2 $refs

9.2 子組件訪問父組件

10.自定義事件

10.1 派發(fā)事件$dispatch()

推薦閱讀更多精彩內(nèi)容