Vue教程15：Vue组件

[chencl1986]

阅读更多系列文章请访问我的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>
`
})