1.组件的基础
1. 介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button-counter title="title1 : " @clicknow="clicknow">
<h2>hi...h2</h2>
</button-counter>
<button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {
count: 0
}
},
template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
methods:{
clickfun : function () {
this.count ++;
this.$emit('clicknow', this.count);
}
}
})
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
- 组件是可以复用的
- 通过Vue 的 component 函数来创建组件
- 这里的组件名称就是button-counter，也是component 函数的第一个参数
- component 函数的第二个参数是一个对象包含data，template，methods等
- html中以标签的形式引用组件
<button-counter></button-counter>
- 事件绑定clicknow（事件名称），通过this的$emit（事件的名称，可携带的参数） 方法去触发clicknow 的函数，这里是通过父级的事件绑定clicknow="clicknow"
- 模板template 可以使用
<slot></slot> 插槽，在组件中插入任意 的内容和标签
2. 单组件注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
props: ['title'],
data: function () {
return {}
},
template: '<div><h1>hi...</h1></div>',
methods:{
}
})
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
},
components:{
test : {
template:"<h2>h2...</h2>"
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
- 通过vue实例里面的components属性定义局部组件
components:{
test : {
template:"<h2>h2...</h2>"
}
}
<div id="app">
<button-counter></button-counter>
<test></test><-! 通过这样的方式引入局部组件></-!>
</div>
