Vue教程15：Vue元件
摘要：
示例程式碼請訪問我的GitHub：github.com/chencl1986/…
該節教程程式碼可通過npm start執行devServer，在http://localhost:8080/檢視效果
註冊Vue元件
示例程式碼：/lesson15/src/cmp1....
示例程式碼請訪問我的GitHub/">GitHub：ofollow,noindex">github.com/chencl1986/…
該節教程程式碼可通過npm start執行devServer，在http://localhost:8080/檢視效果
註冊Vue元件
示例程式碼：/lesson15/src/cmp1.js
通過Vue.component可以註冊一個元件，再將其匯出到入口vm.js即可。
import Vue from 'vue/dist/vue.esm';
// 通過Vue.component註冊一個元件
export default Vue.component('cmp1', {
props: ['name', 'age', 'list'],// 定義要傳入的props，在Vue中只有已定義的props才可以被元件接收到
data(){ // 元件的data必須是函式，為了保證元件的data作用域獨立
return {a: 77, b: 55};
},
// 元件模板
template: `
<div>
姓名：{{name}}<br/>
年齡：{{age}}<br/>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
`
});
複製程式碼
使用元件
示例程式碼：/lesson15/src/vm.js
可以直接通過<cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />使用元件，這樣無論何種情況，元件都會直接被渲染在頁面中。
也可以通過通用元件<component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />使用，is屬性為需要使用的元件名，通過改變該屬性的值，可以控制渲染的元件。
import Vue from 'vue/dist/vue.esm';
import Cmp1 from './cmp1';
let vm=new Vue({
el: '#div1',
data: {
type: 'cmp1'
},
// 區域性元件
// 元件可以直接引入，也可以通過通用component元件引入，當is屬性為特定元件名時，渲染相應元件。
template: `
<div>
可以嘗試輸入cmp1或my-dialog
<input type="text" v-model="type" />
<cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />
<component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />
</div>
`
})
複製程式碼
例項化元件
元件還可以通過new關鍵字進行例項化，例項化後的元件主要用於測試。
// 例項化元件，主要用於測試
let cmp=new Cmp1({
propsData: {
name: '張三',
list: [88, 99, 27]
}
});
// 生成虛擬vm物件
let vm=cmp.$mount();
// vm.$el中儲存了DOM，但不渲染在頁面中
console.log(vm.$el);
// 測試程式碼
if(vm.$el.querySelector('li').innerHTML=='88'){
console.log('正確');
}else{
console.log('失敗');
}
複製程式碼
元件插槽
我們可以在模板中使用<slot />標記一個預設插槽位置，使用<slot name="title"/>標記一個具名插槽位置。
在使用元件時，元件標籤<my-dialog></my-dialog>內部的內容都為插槽內容。其中帶有相應name屬性的內容會被插入到<slot name="title"/>插槽的位置，其餘內容會插入到預設插槽。
示例程式碼：/lesson15/src/my-dialog.js
import Vue from 'vue/dist/vue.esm';
import 'bootstrap/dist/css/bootstrap.css';
import './css/my-dialog.css';
export default Vue.component('my-dialog', {
data(){
return {};
},
template: `
<div class="panel panel-default my-dialog">
<div class="panel-heading">
<slot name="title"/>
</div>
<div class="panel-body">
<slot />
</div>
</div>
`
});
複製程式碼
示例程式碼：/lesson15/src/vm.js
import Vue from 'vue/dist/vue.esm';
import Cmp1 from './cmp1';
import MyDialog from './my-dialog';
let vm=new Vue({
el: '#div1',
data: {
type: 'cmp1'
},
// 區域性元件
// 元件可以直接引入，也可以通過通用component元件引入，當is屬性為特定元件名時，渲染相應元件。
template: `
<div>
可以嘗試輸入cmp1或my-dialog
<input type="text" v-model="type" />
<cmp1 name="Lee Chen" age="18" :list="[1, 2, 3]" />
<component :is="type" name="Lee Chen" age="18" :list="[1, 2, 3]" />
<my-dialog>
<!-- 名為title的插槽內容 -->
<template slot="title">標題</template>
一些文字文字文字
<!-- 預設插槽內容 -->
<ul>
<li>asdfas</li>
<li>asdfas</li>
</ul>
</my-dialog>
</div>
`
})
複製程式碼