vue 2 组件之间传值

对vue2版本的组件之间传值的一个简单整合：

父组件 =》子组件: props 和 refs

-
props: { msg: String }
//parent
<hello-world :msg="welcome to vue.js" />this.$ref.helloWorld.msg

子组件 =》父组件 : 自定义事件

//child
this.$emit('send', msg)
//parent
<hello-world @send="sendMsg($event)" />

兄弟组件：通过共同祖辈搭桥 p a r e n t 或 parent或 parent或root

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

祖先=>后代 provide/inject

// ancestor
provide() { return {msg: 'welcome'}
}
// descendant
inject: ['msg']

后代 =》祖先递归一直派发到root

// 定义一个dispatch方法，指定要派发事件名称和数据
function dispatch(eventName, data) { let parent = this.$parent while (parent) { // 父元素来用$emit触发 parent.$emit(eventName,data) // 递归查找父元素  只要还存在父元素就继续往上查找parent = parent.$parent }
}
// 使用，HelloWorld.vue
<h1 @click="dispatch('hello', 'hello,world')">{{ msg }}</h1>
// App.vue
this.$on('hello', this.sayHello)

任意两个组件之间事件总线和 vuex

事件总线

class EventBus {constructor() {this.callbacks = {}}$on(name, fn) {this.callbacks[name] = this.callbacks[name] || []this.callbacks[name].push(fn)}$emit(name) {let fns = this.callbacks[name]if(fns) {fns.map(fn => fn())}}
}//运用main.jsVue.prototype.$bus = new EventBus()this.$bus.$on('send', handleFn)
this.$bus.$emit('send')

vuex： 创建唯一的全局数据管理者store，过载到vue实例，通过它管理状态数据并通知组件状态变更

3,4,5,6 都可以直接用$root

vue 2 组件之间传值相关推荐

vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
Vue - 全局组件之间传值（中间件传值）
Vue项目中全局组件之间传值(中间件传值) 一. 使用方法二. 传值实例一. 使用方法创建一个中间件文件,文件名自定义这里创建的文件为 send.js send.js 中配置 import V ...
Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
vue中组件之间传值的六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B ...
vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+ # 背景关于Vue组件的通讯方式相信大家能倒背如流父子组件:通过prop,$emit,[$root,$parent,$children] 非父子 ...
Vue父子组件之间传值
组件分两种,全局组件和局部组件全局组件这么写 Vue.component("nav-bar",{props:['navShow',"elecText",&qu ...
VUE兄弟组件之间传值，Vue.prototype.bus = new Vue()，this.bus.$on 的使用方法
举个例子: 组件一中有个分享按钮,点击分享按钮,展示组件二中的分享组件: 组件二分享组件有个取消按钮,点击关闭分享组件. 一.在main.js中添加一个bus实例: Vue.prototype.bus ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...

vue 2 组件之间传值

vue 2 组件之间传值相关推荐

最新文章

热门文章