Vue 组件通信详解

mikasa 发布于2019-08-23 18:07 / 1730人阅读

摘要：父子组件通信兄弟组件通信跨级组件通信父传子子组件用接收，父组件用发送父组件红楼梦西游记三国演义水浒传子组件子传父子组件用有的版本名称只能小写发送，父组件自定义事件然后在方法中接收父组件不能加括号子组件点击把传给父组件可以传

父子组件通信： props、 $parent / $children、 provide / inject 、 ref 、  $attrs / $listeners
兄弟组件通信：EventBus 、 Vuex
跨级组件通信: EventBus 、 Vuex 、 provide / inject 、 $attrs / $listeners

父传子 子组件用 props 接收，父组件用 v-bind:prop 发送
父组件


子组件




子传父 子组件用 v-on:click="" this.$emit("name", this.msg)（【有的版本名称只能小写】）发送，父组件自定义事件 v-on:name="getChildValue" 然后在 getChildValue(data){} 方法中接收
父组件


子组件





父子传参还可以用 $parent（对象）和 $children（数组）


provide / reject （上传下）
父辈组件中通过 provide 来提供变量，子孙组件中通过 reject 来注入变量。
父组件


子组件


孙组件




ref
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据 ref="xx" this.$refs.xx

eventBus（事件总线，项目较大难以维护，组件都可以传） $emit(name, data)发送 $on(name, data=>{})接收 【名称小写】
event-bus.js
import Vue from "vue"
export const EventBus = new Vue()

com1.vue 发送事件

import {EventBus} from "./event-bus.js"
data(){
  return {num: 1}
},
additionHandle(){
  EventBus.$emit("addition", {num: this.num++}
)

com2.vue 接收事件
计算和: {{count}}
data() {
  return {count: 0}
},
mounted() {
  EventBus.$on("addition", param => {
    this.count = this.count + param.num;
  })
}


localStorage / sessionStorage
因为 window.loacalStorage.setItem(key, value)、window.loacalStorage.getItem(key) 储存的是字符串，需要用 JSON.parse() / stringify() 转换
可结合 vuex，实现数据持久保存和解决数据及状态混乱问题


$attrs $listeners（仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用）
test.vue



com1.vue



com2.vue

服务器托管混合云 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104697.html

Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0
Vue-组件详解

摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。查看原文站点，更多扩展内容及更佳阅读体验！组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-com...

dadong 2019-08-26 12:00 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0