當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue 的组件

發(fā)布時(shí)間：2024/1/17 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 的组件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

組件

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

使用組件

注冊組件

首先我們要?jiǎng)?chuàng)建一個(gè)實(shí)例：

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

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

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

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

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

渲染結(jié)果：

對(duì)于自定義標(biāo)簽名，Vue.js 不強(qiáng)制要求遵循 W3C 規(guī)則 (小寫，并且包含一個(gè)短杠)，盡管遵循這個(gè)規(guī)則比較好。

我們知道，在創(chuàng)建的實(shí)例里面是有data數(shù)據(jù)的，其實(shí)在組件里也可以寫數(shù)據(jù)：

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

注意！組件里的data必須是一個(gè)函數(shù)，并將屬性返回

局部注冊

不必在全局注冊每個(gè)組件。通過使用組件實(shí)例選項(xiàng)注冊，可以使組件僅在另一個(gè)實(shí)例/組件的作用域中可用：

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

渲染結(jié)果和上一個(gè)例子是一樣的。

我們來看看全局注冊和局部注冊的區(qū)別：

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

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

DOM 模板解析說明

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

比如：

<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里渲染時(shí)會(huì)反正錯(cuò)誤：

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

模板字符串

有時(shí)候我們可能要在組件里寫很多的標(biāo)簽，如果統(tǒng)統(tǒng)像上面那樣寫的話，看起來很費(fèi)勁，這時(shí)候就可以使用模板字符串：

< 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'//調(diào)用模板字符串的 id });new Vue({el:'.exp',}); </script>

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

Prop

使用 prop 傳遞數(shù)據(jù)

組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的 props 選項(xiàng)。

子組件要顯式地用 props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)：

<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 里傳一個(gè)參數(shù)，就需要使用 prop 屬性.

這種方式是靜態(tài)綁定的方法，還有就是利用 v-bind 指令進(jìn)行動(dòng)態(tài)綁定：

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

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

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

自定義事件

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

每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口 (Events interface)，即：

$on(enentName) 監(jiān)聽事件
$emit(eventName) 觸發(fā)事件

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

<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>

當(dāng)我們點(diǎn)擊第二個(gè)按鈕時(shí)，就會(huì)觸發(fā)父組件內(nèi)的 alert 事件。

其實(shí)我們也可以傳遞參數(shù)，由父組件接收：

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

非父子組件通訊

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

<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 實(shí)例var tkTmp={template:"#tmp",methods:{alertMsg:function(){bus.$emit("pass",1,2)//觸發(fā)事件}}};var pop={template:'<div>2333</div>',mounted:function(){bus.$on("pass",function(arg1,arg2){//監(jiān)聽事件console.log(arg1)console.log(arg2)})}}new Vue({el:'.exp',components:{'tk':tkTmp,'pop':pop}}); </script>

使用 Slot 分發(fā)內(nèi)容

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

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

To be continue......