vue组件传参

1.定义和使用

CounterCom.vue

<template>
   <button>1</button>
</template>

 App.vue

(1)  导入

import CountCom from './components/CountCom.vue'

(2) 注册

components：{CountCom}

(3) 使用

<CounterCom></CountCom>

<counter-com></counter-com> 

 2.父传子

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

App.vue

<CounterCom :num="10">

CounterCom.vue

（1）接受参数并定义默认值

props:{

        "num":{type:Number,default:1}

}

（2）使用参数num

data(){

        return{counter:this.num}

} 

3.子传父

使用时间$emit

CounterCom.vue

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

App.vue

<CounterCom @counterchange="n=$event"></CounterCom>

$emit（事件名,事件值）发送一次时间，事件名（counterchange）和事件值（counter）是自定义的

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