vuejs组件之间的通信

一：父 ==> 子， 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);
}