组件基础
基本事例
组件是一个可以重复利用的vue事例，可以封装一个组件达到快捷开发的目的。
- 用Vue.component("",{})函数来创建一个函数，函数的第一个参数为该组件的名称,可以使用驼峰法命名,也可使用短横线连接的方法命名，{}里描述了整个组件的数据和模版。
- 在试图中我们可以使用组件的名称作为标签，对组件进行调用。
- 可以对组件进行敷用。
- 每个组件的数据是封闭在组件的内部，相互独立的。
- 这些组件都是全局组册的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
data: function(){
return{
count:0
}
},
template:'<button v-on:click="count++">被点击了{{count}}次</button>'
});
var vm = new Vue({
el: '#app',
data:{
}
});
</script>
</body>
</html>
- 可以用props属性为组件定义属性，并在标签中为其赋值.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<button-counter title='1.'></button-counter> </br>
<button-counter title='2.'></button-counter> </br>
<button-counter title='3.'></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props: ['title'], //为组件定义属性
data: function(){
return{
count:0
}
},
template:'<button v-on:click="count++">{{title}} 被点击了{{count}}次</button>'
});
var vm = new Vue({
el: '#app',
data:{
}
});
</script>
</body>
</html>
其输出结果如下：
其中我们必须注意一个组件必须具备一个根结点。
template:'<h1>hi</hi><button v-on:click="count++"
>{{title}} 被点击了{{count}}次</button>'
这样声明将无法被正常渲染，可用< div >标签将其包裹起来。
添加事件的监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<button-counter title='1.' @click="clicknow"></button-counter'> </br>
<button-counter title='2.' @click="clicknow"></button-counter> </br>
<button-counter title='3.' @click="clicknow"></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props: ['title'], //为组件定义属性
data: function(){
return{
count:0
}
},
template:'<div><h1>hi, little potato!</h1><br><button v-on:click="clickfun">{{title}} 被点击了{{count}}次</button></div>',
methods:{
clickfun : function () {
this.count ++;
this.$emit('clicknow', this.count);
}
}
});
var vm = new Vue({
el: '#app',
methods:{
clicknow : function(e) {
console.log(e);
}
}
});
</script>
</body>
</html>
[ ] 为啥后台接受不到count数值
可以在组件内部加入< slot >标签即可在试图上加入任意的html标签
template:'<div><h1>hi, little potato!</h1><
br><button v-on:click="clickfun">{{title}} 被点击了{{count}}次</button><slot></slot></div>',
<button-counter title='1.' @click="clicknow"><h1>hahaha</h1></button-counter> </br>
注明:
使用的是@clicknow绑定,而不是click:
<button-counter title='1.' @clicknow="clicknow"><h1>hahaha</h1></button-counter> </br>
<button-counter title='2.' @clicknow="clicknow"></button-counter> </br>
<button-counter title='3.' @click="clicknow"></button-counter>
