# 组件

# 父子组件

子组件

	<div>
		<span>{{ parentMessage }}</span>
		<button @click="add">我是子组件按钮</button>
	</div>
	
	
	export default {
	    props: {
	        parentMessage: {
	            type: String,
	            default: '默认显示的信息子组件'
	            // require: true // 必填
	        }
	    },
		methods:{
			add(){
				alert('我是子组件的mychild')
			}
		}
	}

父组件

  
	<div>
		<my-child :parentMessage="parentMessage"></my-child>
	</div>
	
	import MyChild from './MyChild'
	export default {
	    components: {
	        MyChild
	    },
	    data() {
	        return {
	            parentMessage: "我是来自父组件的消息"
	        }
	    }
	}

我是来自父组件的消息

默认显示的信息子组件

# 模态框组件

   <div :class="{'ck-modal':true, opened: Visible }" :style="{ width }">
		<div class="ck-modal-header">
			<span class="title">
				<slot name="header">{{title}}</slot>
			</span>
			<span class="close" @click="Visible = false">&times;</span>
		</div>

		<div class="ck-modal-body">
			<slot>主体</slot>
		</div>

		<div class="ck-modal-footer">
			<slot name="footer">
				<button @click="Visible = false">取消</button>
				<button>确定</button>
			</slot>
		</div>
	</div>
	
	export default {
		props: {
			visible: Boolean,
			title: String,
			width: {
				type: String,
				default: '500px'
			}
		},
		data() {
			return {
				Visible: false
			}
		},
		watch: {
			visible(val) {
				this.Visible = val;
			},
			Visible(val) {
				this.$emit('update:visible', val);
			}
		}
	}

  <div id="app">
		<ck-modal title="会员登录" :visible.sync="visible">
			我是模态框中的内容
			<template slot="footer">
				<button @click="visible=false">关闭</button>
				<button>提交</button>
			</template>
		</ck-modal>
		
		<button @click="visible=true">打开模态框</button>
		<button @click="visible=false">关闭模态框</button>
	</div>
	
   import CkModal from './ck-modal'
	export default {
	    components: {
	       CkModal
	    },
	    data() {
	        return {
	            visible: false
	        }
	    }
	}

# 数字输入框组件

<div>

	<button @click="del()" v-bind:class="{ disabled : minstatus }" id="first"> - 
	</button>

	      <input type="text" v-model="cval">

	<button v-on:click="add($event)" id="second" v-bind:class="{ disabled : maxstatus}"> + 
	</button>

          <p>您选购了{{cval}}商品！</p>

</div>

export default {
      props:['max','min','value'],
	  data(){
		return{
			cmax : this.max || 15,
			cmin : this.min || 0,
			cval : this.value || 1,
			maxstatus : false,
			minstatus : false
		}
	},
	methods:{
		add(e){this.cval +=1;},
		del(){this.cval -=1;}
	},
	// 监听
	watch:{
		cval(){
			if(this.cval >= this.cmax){
				this.cval = this.cmax;
				this.maxstatus = true
			}else{
				this.maxstatus = false
			}

			if(this.cval <= this.cmin){
				this.cval = this.cmin;
				this.minstatus = true
			}else{
				this.minstatus = false
			}
		}
	}
}

	<div id="app">
		 <ck-input :max="10" :min="1" :value="2"></ck-input>
		 <ck-input :value="5"></ck-input>
		 <ck-input :max="50" :value="5"></ck-input>
	</div>
	
	import CkInput from './ck-input'
	export default {
	    components: {
	        CkInput
	    },
	    data() {
	        return {
	          
	        }
	    }
	}

您选购了2商品！

您选购了5商品！