什么是组件
组件是独立的、代表了页面的一部分代码。
为什么使用组件
提高扩展性、复用代码好维护,减少代码量。减少工作量
进一步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 使用自定义组件 -->
<my-button name="黄老板" age="18"></my-button>
<!-- 有一个警告, price是字符串,需要的是number -->
<price-display price="10" style="background:red;"></price-display>
<price-display :price="price" unit="abcd"></price-display>
<!-- 有一个警告, price是字符串,需要的是number -->
<price-display price="10" style="background:red;"></price-display>
<!-- 使用插槽 <slot></slot> -->
<my-button2 >我是黄总x</my-button2>
<!-- 具名插槽 <slot name='abc'></slot> -->
<my-button3 >
<h1 slot="a1">我是h1</h1>
<h2 slot="a2">我是h2</h2>
</my-button3>
<my-button4 v-on:count="handleCount"></my-button4>
</div>
<div id="app2" style="margin-top: 20px;border-top:1px solid aqua">
<div v-if="user"> {{user}}</div>
</div>
<script type="text/javascript">
//全局注册组件
//Vue.component('组件名称',{ template:'xx'})
// 定义一个组件,这也太爽了,就是个一个对象
let myButton = {
template: '<button> {{ name }} 年年{{age}}岁</button>',
props:['name','age'],
data() { //组件data是一个函数,这是因为同一个组件在一个页面可以引入多次。函数每一次都是一个新的对象
return {
message: '我是按钮'
}
},
computed: {
//计算属性
}
}
//props验证
Vue.component('price-display',{
props:{
price:{
type:Number, //类型是 number
required:true //必须,否则vue会给出一个警告
},
unit:{
type:String,
default:'$'//默认值$
}
},
template:'<div> {{unit}} {{price}}</div>'
});
//使用插槽 <slot></slot>
Vue.component('my-button2',{
template:'<button><slot>我是小黄</slot></button>'
});
//具名插槽 <slot name='abc'></slot>
Vue.component('my-button3',{
template:"<div><slot name='a1'></slot> <slot name='a2'></slot></div>"
});
//自定义事件
let myButton4 ={
template:'<div @click="handClick">我是黄老板!{{clicks}}次</div>',
data(){
return {clicks:0}
},
methods:{
handClick(){
this.clicks++;
//发送一个count 事件
this.$emit('count',this.clicks);
}
}
};
let vm = new Vue({
el: "#app",
data: {
message: 'hello world',
price:10
},
components: {
myButton,
myButton4
},
methods:{
handleCount(e){
console.log("handleCount",e);
}
}
});
//混入 类似"工具类",混入后就是和那个组件融为一体了
const userMixin ={
methods:{
getUserInfo(){
return {name:'黄老板',age:18,};
}
}
}
let vm2 =new Vue({
mixins:[userMixin],
el:'#app2',
data:{
user:null
},
mounted() {
this.user = this.getUserInfo();
}
});
</script>
</body>
</html>