Vue组件通信

父传子父组件在调用的子组件标签上添加额外属性，如v-bind:message="msg" 将父组件中的msg属性传递给子组件（如果传递死数据，可以不使用指令）
子组件通过props来接受父组件传递的数据，如props:{'message'}
子组件接收和父组件传递名称必须一样
子组件自定义事件，通过$emit 向父组件传递数据，如子组件

onClick(){
  this.$emit('showData',{name:'hello'})
}

父组件调用：

<child @showData = 'show'></child>

methods(){
  show(data){
  this.name = data.name
  }
}

父组件访问子组件可以使用$children来获取一个包含所有子组件(vueCommponet)的数组，可以通过下标
索引来获取相对应的子组件的数据。
子组件访问父组件可以使用$parent来获取父组件的数据（不推荐）
向子组件添加ref属性，父组件通过$refs根据ref属性值来定位子组件，从而获取子组件的数据
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

1.通过父组件进行通信
2.通过建立公共仓库进行通信
在所有组件最上层建立一个中央事件总线（bus）

import Vue from 'vue'
var PublicEvent = new Vue()
export default PublicEvent

如从组件1调用组件2 中的方法和数据
在组件1和2中都需要引入中央事件总线PublicEvent
在组件2 中，定义一个事件，通过该事件触发PublicEvent.$emit('名称'，需要传递的值)

在组件1中，通过钩子函数mounted在初始化组件时调用PublicEvent.$on('名称'，func)

最后编辑于：2020.01.01 14:22:10

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。