vue组件传参

一、vue组件

        1、定义与使用

//CounterCom.vue
<template>
    <button></button>
</template>

//App.vue
//01导入组件
import CounterCom from './components/CounterCom.vue'
//02注册组件
components:{CounterCom}
//03使用组件
<CounterCom></CounterCom>
<counter-com></counter-com>

        2、父传子

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

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

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

        3、子传父

           使用的事件$emit

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

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

//App.vue
<CounterCo