組件

上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...

使用組件

注冊組件

首先我們要創建一個實例：

new Vue({el:'.exp',// ...... })

要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {// 選項 })

組件在注冊之后，便可以在父實例的模塊中以自定義元素 < my-component >< /my-component > 的形式使用。要確保在初始化根實例之前注冊了組件：

<div class="exp"><my-component></my-componetn> </div> <script>Vue.component('my-component',{template:'<div>這是一個組件</div>'})new Vue({el:'.exp',}) </script>

渲染結果：

<div class="exp"><div>這是一個組件</div> </div>

對于自定義標簽名，Vue.js 不強制要求遵循 W3C 規則 (小寫，并且包含一個短杠)，盡管遵循這個規則比較好。

我們知道，在創建的實例里面是有data數據的，其實在組件里也可以寫數據：

Vue.component('my-component'{templent:'<div><input type="button"></div>',data:function(){return{msg:'hello'}} })

注意！組件里的data必須是一個函數，并將屬性返回

局部注冊

不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：

<div class="exp"><my-component></my-component> </div> <script>var child={template:'<div>這是一個局部組件</div>'}new Vue({el:'.exp',components:{'my-component':child}}) </script>

渲染結果和上一個例子是一樣的。

我們來看看全局注冊和局部注冊的區別：

<div class="exp"><my-component></my-component> </div> <div class="exp1"><first></first> </div> <script>//全局注冊Vue.component('my-component',{template:'<div>這是一個全局組件</div>'});new Vue({el:'.exp',});// 局部注冊var child={template:'<div>這是一個局部組件</div>'};new Vue({el:'.exp1',components:{'first':child}}); </script>

局部注冊的組件，只能在 .exp1 內使用，拿給 .exp 是不可以的，當然我們把全局注冊的組件給 .exp1 ，是可以生效的。

DOM 模板解析說明

當使用 DOM 作為模板時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模板內容。尤其像這些元素 < ul >，< ol >，< table >，< select > 限制了能被它包裹的元素，而一些像 < option > 這樣的元素只能出現在某些其它元素內部。

比如：

<div class="exp"><table><my-component></my-component></table></div><script>Vue.component('my-component',{template:'<tr><td>1</td><td>2</td></tr>'});new Vue({el:'.exp',}); </script>

如上，這樣的寫法在DOM里渲染時會反正錯誤：

<tr>...</tr> <table></table>

為了解決，就需要使用 is 屬性

<table><tr is="my-component"></tr> </table>

模板字符串

有時候我們可能要在組件里寫很多的標簽，如果統統像上面那樣寫的話，看起來很費勁，這時候就可以使用模板字符串：

< script type="text/x-template" >< /script >

<div class="exp"><table><tr is="my-component"></tr></table></div> <!-- 模板字符串 --> <script type="text/x-templent" id="tmp"><tr><td>1</td><td>3</td><td>4</td><td>3</td></tr> </script> <script>Vue.component('my-component',{template:'#tmp'//調用模板字符串的 id });new Vue({el:'.exp',}); </script>

這樣寫的話就比較直觀了。

Prop

使用 prop 傳遞數據

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的 props 選項。

子組件要顯式地用 props 選項聲明它期待獲得的數據：

<div class="exp"><tk msg="hello"></tk> </div> <script type="text/x-templent" id="tmp"><div><input type="button" v-on:click="alertMsg" value="彈框"></div> </script> <script>var tkTmp={template:"#tmp",//聲明propsprops:['msg'],methods:{alertMsg:function(){alert(this.msg)}}};new Vue({el:'.exp',components:{'tk':tkTmp}}); </script>

在上面的例子中，我們要在子組件 tk 里傳一個參數，就需要使用 prop 屬性.

這種方式是靜態綁定的方法，還有就是利用 v-bind 指令進行動態綁定：

<tk v-bind:msg="msg"></tk>

駝峰式命名和短橫線隔開式命名

HTML 特性是不區分大小寫的。所以，當使用的不是字符串模板，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

ue.component('child', {// camelCase in JavaScriptprops: ['myMessage'],template: '<span>{{ myMessage }}</span>' }) <!-- kebab-case in HTML --> <child my-message="hello!"></child>

自定義事件

使用 v-on 綁定自定義事件

每個 Vue 實例都實現了事件接口 (Events interface)，即：

• $on(enentName) 監聽事件

• $emit(eventName) 觸發事件

我們可以使用 $emit 來用子組件觸發父組件的事件：

<div class="exp"><tk v-bind:msg="msg"></tk><tk msg="HELLO WORDL" v-on:jieshou="jieshoufn"></tk> </div> <script type="text/x-templent" id="tmp"><div><input type="button" v-on:click="alertMsg" value="彈框"></div> </script> <script>var tkTmp={template:"#tmp",props:['msg'],methods:{alertMsg:function(){alert(this.msg),this.$emit("jieshou","abc","def")}}};new Vue({el:'.exp',data:{msg:'hello'},components:{'tk':tkTmp},methods:{jieshoufn:function(){alert(2);}}}); </script>

當我們點擊第二個按鈕時，就會觸發父組件內的 alert 事件。

其實我們也可以傳遞參數，由父組件接收：

this.$emit("jieshou","abc")

非父子組件通訊

有時候兩個組件也需要通信 (非父子關系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線：

<div class="exp"><tk></tk><pop></pop> </div> <script type="text/x-templent" id="tmp"><div><input type="button" v-on:click="alertMsg" value="彈框"></div> </script> <script>var bus=new Vue();//空的 vue 實例var tkTmp={template:"#tmp",methods:{alertMsg:function(){bus.$emit("pass",1,2)//觸發事件}}};var pop={template:'<div>2333</div>',mounted:function(){bus.$on("pass",function(arg1,arg2){//監聽事件console.log(arg1)console.log(arg2)})}}new Vue({el:'.exp',components:{'tk':tkTmp,'pop':pop}}); </script>

使用 Slot 分發內容

這部分官方文檔說的有點啰嗦，我這邊就合到一塊說吧。直接上個例子：

<style>.box{margin: 10px;width: 150px;border: 1px solid #ccc;}.box-header, .box-footer{height: 30px;background: sandybrown;}.box-body{min-height: 100px;}</style> <body><div class="exp"><box><h2 slot="title">Slot內容分發<h2><p>為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為 內容分發 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 實現了一個內容分發 API，參照了當前 Web 組件規范草案，使用特殊的 <slot> 元素作為原始內容的插槽。</p><p slot="foot">分發完成</p></box></div><script type="text/x-template" id="tmp"><div class="box"><div class="box-header"><slot name="title"></slot></div><div class="box-body"><slot></slot></div><div class="box-footer"><slot name="foot"></slot></div></div></script><script>var box={template:"#tmp",}new Vue({el:'.exp',components:{"bilibili":box}})</script> </body>

< slot >被成為插口，在組件中，我們需要使用 slot 插口預留一個位置，以方便分發內容。如上，在放置正文內容的地方，我們直接插入一對 slot 標簽標記出正文內容的位置。對于頁面標題和頁腳等特殊的位置，我們就需要"具名Slot"，用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素。

To be continue......

上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...

總結

以上是生活随笔為你收集整理的Vue 的组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。