vue组件之间通信

一：父 ==> 子， props
1：props 类型

props: {

            num: {

            type: Number,

            default: 0

            },

            str: {

            type: String,

            default: ''

            },

            bool: {

            type: Boolean,

            default: false

            },

            arr: {

            type: Array,

            default: () => {

            return []

            }

            },

            fun: {

            type: Function,

            default: () => () => {}

            },

            obj: {

            type: Object,

            default: () => {

            return {}

            }

            }

}

2：定义子组件，然后在父组件里面引入使用

import childs from '../../../components/childs/childs'

<childs :obj="obj" str="fff"></childs>
3：父组件 data 定义一个数据，冒号为动态传值

obj: {

          name: 'name',

          age: 18

}

二：子 ==> 父，$emit
1：子组件里面，methods 定义一个方法

handleSuccess () {

      // 子 ==> 父 组件通信，数据自定义

     this.$emit('toParent', this.list);

  }

}

2：父组件里面引用使用，methods 定义一个方法

import childs from '../../../components/childs/childs'

<childs @toParent="toParent"></childs>

toParent (arr) {

  console.log(arr);

}