vue组件传参

定义与使用

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  接收参数并定义默认值
props:{
    "num":{type:Number,default:1}
}
//02  使用参数num
data(){
    return {counter:this.num}
}

子传父

使用的事件 $emit

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

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

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

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