Vue教程15:Vue组件
Opened this issue · 0 comments
chencl1986 commented
阅读更多系列文章请访问我的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>
`
})