前言
在上一篇初識Vue核心中，我們已經熟悉了vue的兩大核心，理解了Vue的構建方式，通過基本的指令控制DOM,實作提高應用開發效率和可維護性，而這一篇呢，將對Vue視圖組件的核心概念進行詳細說明，
什么是組件呢？
組件可以擴展HTML元素，封裝可重用的HTML代碼，我們可以將組件看作自定義的HTML元素，
為什么要用到組件呢？
為了可重用性高，減少重復性開發，讓我們可以使用獨立可復用的小組件來構建大型應用，
基本
一、組件注冊
1.通過Vue.extend()創建，然后由component來注冊
// extend 創建組件 var MyComponent = Vue.extend({ template: '<div>A custom component!</div>' }); // component注冊 組件 Vue.component('my-component', MyComponent);//使用到了 extend 創建的組件 var vm = new Vue({ el: '#app', data: { } })
說明：
- 1. Vue.extend()是Vue構造器的擴展，呼叫Vue.extend()創建的是一個組件構造器，
- 2. Vue.extend()構造器有一個選項物件，選項物件的template屬性用于定義組件要渲染的HTML，
- 3. 使用Vue.component()注冊組件時，需要提供2個引數，第1個引數時組件的標簽，第2個引數是組件構造器，
- 4. 組件應該掛載到某個Vue實體下，否則它不會生效，
extend 是構造創建一個組件的語法器，你給它引數 他給你創建一個組件， 然后這個組件，你可以作用到Vue.component 這個全域注冊方法里， 也可以在任意vue模板里使用組件
var demo= Vue.extend({
….
})
Vue.component(‘demo’,demo)
可見上邊的定義程序比較繁瑣，也可以不用每次都呼叫兩個，可以直接用 Vue.component 創建 ，也可以取組件 例如下
var demo= Vue.component(‘demo’)
2.全域注冊
如果我們定義了多個 vue實體，我們都可以使用這一個組件
<div id="app"> <my-component></my-component> </div> <script> //注意要在vue實體之前去定義，不然渲染頁面的時候，會報錯 // 定義一個名為 myComponent 的新組件 Vue.component(' myComponent ', { template: ` <div id=" my-component "> <p>2018 <a href=https://www.cnblogs.com/i3yuan/p/"#">艾三元</a> - Hosted by <a href=https://www.cnblogs.com/i3yuan/p/"#" style="font-weight: bold">Coding Pages</a></p> <p> <a href=https://www.cnblogs.com/i3yuan/p/"#">京ICP備00000000號</a> </p> </div> `, data () { return { message: 'hello world' } } }) var app = new Vue({ el: '#app',//沒錯，vue實體所定義的DOM元素就是這個，超過了這個區域，定義的組件會無效 data: { }, }) </script>
3.區域注冊
表示只有在當前頁面的app元素內使用
var app = new Vue({ el: '#app', data: { }, components: { 'my-component': {//這個就是我們區域組件的名字 在頁面內使用 <my-component></my-component> template: ` <ul class ="contact-list non-style-list"> <li> <b class ="component">組件</b>: <a href=https://www.cnblogs.com/i3yuan/p/"#">@艾三元</a> </li> </ul>`, data () { return { message: 'hello world' } }, directives:{//自定義區域指令，使用的時候，直接可以 <my-component v-focus><my-component> focus;{ inserted(el){ el.focus(); } } } } } })
注意：全域的組件是 component，而 區域的是 components
屬性
定義了這個組件有哪些可配置的屬性，組件的核心功能也是由它確定，props最好用物件寫法，這樣可以針對屬性設定型別，默認值或自定義校驗屬性的值，
<script> export default { name: "PropsDemo", props: { name: String, type: { validator: function(value) { //從父級傳入的 type，它的值必須是指定的 'success', 'warning', 'danger'中的一個，如果傳入這三個以外的值，都會拋出一條警告 return ["success", "warning", "danger"].includes(value); } }, list: { type: Array, // 物件或陣列默認值必須從一個工廠函式獲取 default: () => [] }, isVisible: { type: Boolean, default: false }, onChange: { type: Function, default: () => {} } }, methods: { handleClick() { // 不要這么做、不要這么做、不要這么做 // this.type = "warning"; // 可以，還可以更好 this.onChange(this.type === "success" ? "warning" : "success"); } } }; </script> //用法 <props name='Hello World' //原生屬性 :type='type' :is-visible="false" :on-change="handlePropChange" :list=[22,33,44] title="Demo" //原生屬性 class="test1" //原生屬性 :class="['test2']" :style="{ marginTop: '15px' }" //注意:style 的優先級是要高于 style style="margin-top: 10px">
通訊
一、父子通訊
1.父向子傳值：
語法：在父組件中使用子組件時候，通過以下方式傳遞資料
<child-component v-bind:子組件prop="父組件資料屬性"></child-component>
//定義一個組件，并在vue實體中定義了data選項 var vm = new Vue({ el: '#app', data: { name: 'keepfool', age: 28 }, components: { 'my-component': { template: '#myComponent', props: ['myName', 'myAge'] } } }) 定義一個組件 Vue.component('my-component', { template: ` <div id="myComponent"> <table> <tr> <th colspan="2"> 子組件資料 </th> </tr> <tr> <td>my name</td> <td>{{ myName }}</td> </tr> <tr> <td>my age</td> <td>{{ myAge }}</td> </tr> </table> </div>`, props: ['foo'],//這里根據組件的props屬性，來被動接受組件傳遞來的引數 data () { return { message: 'hello world' } } }) //將父組件資料通過已定義好的props屬性傳遞給子組件： <div id="app"> <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> </div>
注意：在子組件中定義prop時，使用了camelCase命名法，由于HTML特性不區分大小寫，瀏覽器會把所有大寫字符解釋為小寫字符，所以camelCase的prop用于特性時，需要轉為 kebab-case（短橫線分割命名），例如，在prop中定義的myName，在用作特性時需要轉換為my-name，
2.子向父傳值：自定義事件
1） v-on系結自定義事件：
每個 Vue 實體都實作了事件介面，即：$on(eventName) 監聽事件 和 $emit(eventName) 觸發事件
在父組件中：
<my-component v-on:child-say="listenToMyBoy"></my-component> //3、父組件通過監聽，來獲取到這個廣播信號 child-say ，然后觸發 listenToMyBoy 方法 <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ //4、incrementTotal 被觸發，獲取到引數 counter 值，執行相應的操作 this.childWords = somedata } }
在子組件my-component中
<button v-on:click="onClickMe">like!</button> ////1、子組件內，有一個click，當點擊的時候 觸發 onClickMe 方法 methods: { onClickMe: function(){ this.$emit('child-say',this.somedata); //2、方法被觸發以后，向父組件 發送一個信號廣播，并傳遞引數 somedata，名字就是 child-say } }
通過子組件注冊觸發事件，父組件注冊 觸發子組件事件后的方法，傳遞引數，父組件通過監聽子組件的事件，獲取引數，執行回應的變化操作
完整示列
<my-component v-on:child-say="listenToMyBoy"></my-component> //3、父組件通過監聽，來獲取到這個廣播信號 child-say ，然后觸發 listenToMyBoy 方法 <p>Do you like me? {{childWords}}</p> Vue.component('my-component', { template: '<button v-on:click="onClickMe">like!</button>', //1、子組件內，有一個click，當點擊的時候 觸發 onClickMe 方法 methods:{ onClickMe: function(){ this.$emit('child-say',this.somedata); //2、方法被觸發以后，向父組件 發送一個信號廣播，并傳遞引數 somedata，名字就是 child-say } } }) var vm = new Vue({ el: '#app', data: { childWords:'' }, methods:{ listenToMyBoy: function (somedata){ //4、incrementTotal 被觸發，獲取到引數 counter 值，執行相應的操作 this.childWords = somedata } } })
插槽
Vue中的插槽，是組件的一塊模板，由使用父組件提供，簡單的說，就是子組件暴露一個讓父組件傳入自定義內容的介面，這樣可以讓使用者更好的拓展組件，進行更豐富的復用和定制化組件，
插槽Slot的三大分類：默認插槽、具名插槽和作用域插槽
1.默認插槽:直接在子組件的標簽內寫入內容即可
//父組件 <template> <div class="father"> <h3>灰色背景這是父組件</h3> <child> <div class="tmpl"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </child> </div> </template> //子組件 <template> <div class="child"> <h3>藍色背景這是子組件</h3> <slot></slot> </div> </template>
2.具名插槽: 用name屬性來表示插槽的名字，不傳為默認插槽
//父組件 <template> <div class="father"> <h3>灰色背景這是父組件</h3> <child> <div slot="header"> <span>頁頭1</span> <span>頁頭2</span> <span>頁頭3</span> </div> <div> //一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”， <span>內容1</span> <span>內容2</span> <span>內容3</span> </div> <div slot="footer"> <span>頁腳1</span> <span>頁腳2</span> <span>頁腳3</span> </div> </child> </div> </template> //子組件 <template> <div class="child"> // 具名插槽 <slot name="header"></slot> <h3>藍色背景這是子組件</h3> // 具名插槽 <slot></slot> //一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”， // 匿名插槽 <slot name="footer"></slot> </div> </template>
3.作用域插槽: 在作用域上系結屬性來將子組件的資訊傳給父組件使用，這些屬性會被掛在父組件slot-scope接受的物件上
//父組件 <template> <div class="father"> <h3>灰色背景這是父組件</h3> <child> <template slot-scope="number"> <div> <span v-for="item in number.data">{{item}}</span> </div> </template> </child> <child> 這就是模板 </child> </div> </template> //子組件 <template> <div class="child"> <h3>藍色背景這是子組件</h3> // 作用域插槽 <slot :data=https://www.cnblogs.com/i3yuan/p/"data"></slot> </div> </template> export default { data: function(){ return { data: ['one','two','three'] } } }
注意：
內置指令v-slot，可以縮寫為【#】
子組件用法保持不變，父組件中
slot屬性棄用，具名插槽通過指令引數v-slot:插槽名的形式傳入，可以簡化為#插槽名，
<template #header>
<div>具名插槽</div>
</template>
slot-scope屬性棄用，作用域插槽通過v-slot:xxx="slotProps"的slotProps來獲取子組件傳出的屬性
<!--作用域插槽--> <template #footer="slotProps"> <div> {{slotProps.testProps}} </div> </template>
v-slot屬性只能在<template>上使用，但在【只有默認插槽時】可以在組件標簽上使用
<template v-slot>
<div>默認插槽</div>
</template>
總結
1.通過上述的描述，關于組件的了解有了更加進一步的認識，從組件的創建構造器到組件的組成，進而到組件的使用，已經豐富了多樣式的組件，提高了復用性，
2.從組件的基本使用、組件屬性，以及自定義事件實作父子通訊和巧妙運用插槽slot分發內容，進一步的認識到組件在Vue中的核心地位
3.參考資料官方檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/181606.html
標籤：JavaScript
上一篇：B站自動刷彈幕