[组件传参]

组件传参：

例：
CounterCom.vue

<template>
<button>5</button>
</template>

App.vue

> 01.导入： import CounterCom from './components/CounterCom.vue'
> 02.注册： components：{{CounterCom}}
> 03.使用： <CounterCom><CounterCom>

父传子

使用props 父传递给子的数组是只能读，不能修改

App.vue中：

<CounterCom :num="10">

CounterCom.vue中：

//通过props接收父元素App.vue传参(通过属性绑定的方式来传值) number
		// 在data中使用num
		// props:['num'],
		props: {
			"num": {
				type: Number,
				default: 1
			},
			
     data() {
			// 02.把传过来的num  赋值给counter
			return {
				counter: this.num
			}
		}

// Number数字 String字符串 Boolen布尔值-值类型
// Array数组 Object对象 -引用类型
// 引用的默认值使用函数返回值 default(){return:[]}

子传父

使用$emit

CounterCom.vue

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

App.vue:

<counter-com :num=“c” @counterchange=“c=$event”>

父传子：

props：
默认值：value。
最大值：max。
最小值：min。
步进制：step（0.5 or 1 or …）

methods:
add
minus

data：
数值：num

numchange 数字发生改变