组件的传参

组件的定义与使用

组件的传参

父App.vue 传给子CounterCom.vue

主要使用的是props

CounterCom.vue 组件中
1.接收参数并定义默认值
props:{
    "num":{type:Number,default:1}
}
2.使用参数num
data(){
    return {counter:this.num}
}

App.vue文件中
<CounterCom :num="10">

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

 实现点击加1功能

 子组件数据传递给父组件

使用的事件 $emit

CounterCom.vue
<button @click="counter++; $emit('counterchange',counter)">

App.vue
<CounterCom @counterchange="n=$event">

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

$event 固定写法,事