vue2 父子组件之间通信

1.父组件与子组件通信

父组件:

<template>
        <div>
             <child :child-msg="msg"></child>
        </div>
</template>

子组件:(子组件用props接收数据)

• 格式1

export default { 
      props:['childMsg']
}

• 格式2

export default { 
    props:{ childMsg:Array  // 指定传入的类型}
}

• 格式3

export default { 
    props:{
       childMsg: { type: Array, default:[0,0,0] // 指定默认的值 } 
    }
}

2.子组件与父组件通信

子组件(通过$emit)

<template>
        <div @click="up">child</div>
</template>
export default { 
  data() {
    return {
      childMsg:'this is child'
    }
  },
  methods: {
    up() {
      this.$emit('clickFun', this.childMsg)
    }
  }
}

父组件

<template>
        <div @clickFun="parentChange">parent</div>
</template>
export default { 
  data() {
    return {
      parentMsg:''
    }
  },
  methods: {
    parentChange(data) {
      this.parentMsg = data
    }
  }
}