一、vue组件

        1、定义与使用

//CounterCom.vue
 
//App.vue
//01导入组件
import CounterCom from './components/CounterCom.vue'
//02注册组件
components:{CounterCom}
//03使用组件
<CounterCom>CounterCom>
<counter-com>counter-com>

        2、父传子

           使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改

//App.vue中
<CounterCom :num="10">
 
//CounterCom.vue组件中
// 01.props接收父组件中的参数并定义默认值
props:{"num":{type:Number,default:1},
//02 使用参数num
data(){
  return{counter:this.num}
}

        3、子传父

           使用的事件$emit

   $emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的

   $event固定写法，事件的值{counterchange  事件的值，也是子组件$emit的第二个参数}

//App.vue
@counterchange="m=$event">
 
//CounterCom.vue
@click="counter++;$emit('counterchange',counter)">
        {{counter}}

二、数据传参

        1、父传子

         2、子传父

 三、组件的设计

        1、组件的设计

           props： 默认值：value，最大值：max，最小值：min，步进值：step(一次加多少)

           data：   被改变的值：num

           methods： 加：add，减：minus

           事件：numchange(数字发生变化)

<template>
	<span>
		<button @click="minus" :disabled="num<=min">-button>
		<input type="text" v-model.number="num">
		<button @click="add" :disabled="num>=max">+button>
	span>
template>
 
<script>
	export default{
		props:{
			// 定义props.value 默认值
			value:{type:Number,default:1},
			max:{type:Number,default:10},
			min:{type:Number,default:1},
			step:{type:Number,default:1}
		},
		data(){
			return{
				// 使用props的value值
				num:this.value
			}
		},
		methods:{
			// 实现添加方法
			add(){
				this.num+=this.step;
				// 当数据变化时,发送一个numchange
				this.$emit("numchange",this.num);
			},
			// 实现减1方法
			minus(){
				this.num--;
				this.$emit("numchange",this.num);
			},
		}
	}
script>

        2、组件的设计SwiperCom

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

           data： index  当前显示第几张

           methods： auto 自动播放，check  检查边界

           事件

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

        3、组件的设计文字滚动时间MarrQuee

           props：str 滚动的文本，inter  间隔时间

           data：msg

           methods：auto  自动播放