组件相关知识

一、 定义和使用：

例：
CounterCom.vue

<template>
<button>1</button>
</template>

  App.vue

01 导入

import CounterCom from './components/CounterCom.vue'

02注册

components：{{CounterCom}}

03使用

<CounterCom></CounterCom>
<counter-com></counter-com>

二、 父传子

使用props
父传给子的数组是只读的（默认值，读取显示）
不能进行修改

 App.vue文件中

<CounterCom :num="10>

 Countercom.vue组件中

01 接收参数并 定义传递过来的参数是数字列席，默认值是1

props :{
"num":{type:Number,default:1}
}

02 使用参数num
 

data(){
return {counter:this.num}
}

 三、子传父

使用的事件 $emit

 CounterCom.vue

<button class="active" @click="counter++; $emit('counterchange',counter)">

App.vue

<CounterCom  @counterchange="n=$event"></CounterCom>

•  $emit (事件名,事件值)  发送一次事件，事件名{counterchange}和事件值{counter}是自定义的
•  $event固定写法 ,事件的值（counterchange 事件的值，也是子组件$emit的第二个参数）

 四、组件传参

子传父

父传子

五、组件的设计

以下面图片为例：

props

• 默认值:value
• 最大值:max
• 最小值:min
• 步进制:step（一次加多少）

data

 被改变的值 :num

methods

加add
减 minus     

 事件

 numchange  数字发生的变化

 template

   <span></span>
    <input type="">
    <button></button>

六、组件设计SwiperCom 

props

•  gallery 传入图片的数组
•  inter 间隔时间
•  current 当前第几张幻灯片

data

   index 当前显示第几张

 methods

auto 自动播放

auto(){
		this.stopID=setInterval(()=>{
		// 每隔2500毫秒让index值加1
		// 检查index的边界
		this.index++;
		this.check();
		},2500)
},

check 检查边界

check(){
		// 如果index=gallery的长度 让index值=0
		if(this.index>=this.gallery.length){
		this.index=0
		}
}

overHd  输入移除

outHd   鼠标移除

 template

<div class="swiper">
    <div class="swiperitem">幻灯片<img></div>
    <div class="controls">上一张，下一张</div>
    <div class="thumbs">小圆点</div>
</div>