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);

}



原文地址:https://www.cnblogs.com/youaremysunshine19961002/p/11805987.html