vue组件传参

一、组件传参的类型

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

二、定义组件

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

<template>
  <div></div>
</template>

<script>
</script>

<style scoped>
</style>

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

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

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

components:{CounterCom}

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

<CounterCom></CounterCom>

完整代码如下

<template>
    <div>
        <CounterCom ></CounterCom>
</template>

<script>
    import CounterCom from './components/CounterCom.vue'
    export default{
        components:{CounterCom},
        data(){
            return{
                msg:"vue-脚手架写大项目",
            }
        }
    }
</script>

<style scoped="scoped">
</style>

三、父传子

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

App.vue

<CounterCom :num="5"></CounterCom>

CounterCom.vue

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

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

四、子传父

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

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

CounterCom.vue

<button class="active" @click="counter++;$emit('counterchange',counter)">
        {{counter}}
 </button>

在父组件绑定 countChange 事件

App.vue

<template>
    <div>
        <counter-com @counterchange="n=$event"></counter-com>
    </div>
</template>