Vue.js学习（三）
组件的学习
①基础概念
1.1组件是一个可复用的Vue实例，需要挂载到Vue的实例上。
1.2组件除了el选项外，同样包括有data、computed、watch、methods以及生命周期等。
②定义组件
2.1组件的data和Vue实例有区别。组件通过一个函数返回一个对象，而Vue实例是对象，组件用函数返回一个对象主要是组件可以复用，在复用的时候不影响其他的组件。
2.2组件没有el选项，vue实例有el选项。
2.3组建的html元素定义在template属性上。Vue实例通过el指定挂载的位置。
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script>
//定义组件
var component1 = {
data() {
return {
count: 0,
}
},
template: `
<button @click='count++'>点击{{count}}</button>
`
}
//全局注册组件
Vue.component("button-counter", component1);
var vm = new Vue({
el: "#app",
})
</script>
③注册组件到Vue实例
3.1全局注册代码如上:
3.2组件名要求：组件名1.要短横线隔开，使用时一样。2.用帕斯卡命名（大驼峰）用component注册是命名使用大驼峰，在使用组件的时候就要把大写变成小写并在前面加短横线。
组件名称最高全部采用小写，因为html标签始终都是小写的，只有html的名称与组件一致才匹配。另外一种方式组件采用大驼峰命名，表签名每个单词用短横杠分隔。推荐组名用小写，因为html的标签名始终是小写方式渲染的，这样就可以避免不必要的麻烦。
3.3局部注册：定义在components上，属性名就是自定义元素的名字，属性值就是这个组建的额选项对象。局部注册的组件在其子组件中不可用。
<body>
<div id="app">
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
</body>
<script>
var component1={
data(){//data用函数 返回一个对象，目的是复用
return {
count:0,
}
},
template:`
<button @click='count++'>点击{{count}}</button>
`
}
var vm=new Vue({
el:"#app",
components:{
"button-count":component1,
}
})
</script>
④props-父组件给子组件传递数据
<body>
<h1>数组</h1>
<div id="app">
<cousrse-itme :arr='arr'></cousrse-itme>
<cousrse-itme :arr='arr'></cousrse-itme>
</div>
<h1>对象</h1>
<div id="app1">
<props-obj :age=18 :height=20></props-obj>
</div>
</body>
<script>
//数组
var courseLIst={
props:['arr'],
template:`<div>
<p v-for='(itme,index) in arr'>{{itme}}{{index}}</p>
</div>
`
}
var vm=new Vue({
el:"#app",
data:{
arr:["a",2,3,4,5,6]
},
components:{
"cousrse-itme":courseLIst
}
})
//对象
var courseLIst1={
props:{
height:Number,
age:{
type:Number,//数据类型
default:18,//默认值
required:true,//是否必须
validator(val){//校验器
return val>0&&val<60
}
}
},
template:`
<p>高为：{{height}} 年龄为：{{age}}</p>
`
}
var vm1=new Vue({
el:"#app1",
data:{
obj:{
height:180,
age:20,
}
},
components:{
"props-obj":courseLIst1,
}
})
props可以用数组和对象的方式传值。注意命名：1.全小写：节点上的名称与属性的名一致。2.小驼峰：节点上要使用短横杠隔开，大小写没有关系。
⑤通过自定义事件向父级组件发送信息
5.1在vue.js中，可以使用$emit自定义事件
语法:$emit("事件名"，“事件传递的数据”)。
v-model实际上是@input="value=$event"操作的语法糖。
<body>
<div id="app">
<!-- <stu-content @left-length="leftnumber=$event"></stu-content> -->
<stu-content v-model="leftnumber"></stu-content>
<p>剩余字数{{leftnumber}}</p>
</div>
</body>
<script>
var component1={
data(){
return{
content:'',
maxLength:50,
}
},
watch:{
content(n,o){
// this.$emit("left-length",this.maxLength-n.length);
this.$emit("input",this.maxLength-n.length);
}
},
template:`<div>
<textarea v-model='content' maxLength='50'></textarea>
</div>
`,
}
var vm=new Vue({
el:"#app",
data:{
leftnumber:50,
},
components:{
"stu-content":component1,
}
})
</script>
⑥通过插槽分发内容
把组件之间的内容传入到组件中，使用<slot></slot>插槽，实例代码如下：
<body> <div id="app"> <stu-content v-model="leftnumber">50 <div slot="frist">第一个</div> <div slot="frist1">第二个</div> </stu-content> <p>剩余字数{{leftnumber}}</p> </div></body><script> var component1={ data(){ return{ content:"", maxlength:50 } }, template:` <div> <textarea v-model="content" maxLength='50'></textarea> <p>限输<slot></slot>字</p> <slot name='frist'></slot> <slot name='frist1'></slot> </div> `, watch:{ content(n,o){ this.$emit("input",this.maxlength-n.length) } } } var vm=new Vue({ el:"#app", data:{ leftnumber:50, }, components:{ "stu-content":component1, } })</script