Vue教程15：Vue組件

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

該節教程代碼可經過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>
`
})
複製代碼