vue组件传参

一、组件传参的类型

vue组件之间可以进行参数传递，组件传参可分为父向子传参、子向父传参、兄弟之间传参

二、定义组件

1、首先在src的子文件compoment下新建一个组件CounterCom

2、在App.vue组件中导入CounterCom组件，这样CounterCom就成为了App.vue的子组件，导入方式如下所示：

import CounterCom from './components/CounterCom.vue'

3、然后在script中注册组件，如下

components:{CounterCom}

4、最后在template中使用组件，如下

完整代码如下

三、父传子

父传子：父组件传递过去的数据，子组件通过 props 来接收。(接收的数据只读，不能修改)

App.vue

CounterCom.vue

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

子组件接收的值可以为：Number、String、Boolen、Array、Object、

四、子传父

子传父：子传父使用$emit发射数据

其中，$emit中第一个参数为事件名，第二个参数为事件值

CounterCom.vue

        {{counter}}
 

在父组件绑定 countChange 事件

App.vue