We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
开始之前,我们把组件间通信这个词进行拆分
都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件,可能会往table组件中传入某些数据,这个本质就形成了组件之间的通信
vue
.vue
UI
table
在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话,我们可以看到通信的本质是信息同步,共享回到vue中,每个组件之间的都有独自的作用域,组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据,这也是组件通信的目的要让它们互相之间能进行通讯,这样才能构成一个有机的完整系统
组件间通信的分类可以分成以下
关系图:
整理vue中8种常规的通信方案
props
Children.vue
props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, // 默认值为18 require:true // age属性必须传递 } }
Father.vue组件
Father.vue
<Children name="jack" age=18 />
$emit触发
$emit
Chilfen.vue
this.$emit('add', good)
<Children @add="cartAdd($event)" />
ref
父组件
<Children ref="foo" /> this.$refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应的数据
EventBus
$on
Bus.js
// 创建一个中央时间总线类 class Bus { constructor() { this.callbacks = {}; // 存放事件的名字 } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } } // main.js Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上 // 另一种方式 Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能
Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)
$parent
$root
兄弟组件
this.$parent.on('add',this.add)
另一个兄弟组件
this.$parent.emit('add')
$attrs
$listeners
prop
v-bind="$attrs"
// child:并未在props中声明foo <p>{{$attrs.foo}}</p> // parent <HelloWorld foo="foo"/>
// 给Grandson隔代传值,communication/index.vue <Child2 msg="lalala" @some-event="onSomeEvent"></Child2> // Child2做展开 <Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson使⽤ <div @click="$emit('some-event', 'msg from grandson')"> {{msg}} </div>
provide
inject
祖先组件
provide(){ return { foo:'foo' } }
后代组件
inject:['foo'] // 获取到祖先组件传递过来的值
vuex
适用场景: 复杂关系的组件数据传递
Vuex作用相当于一个用来存储共享变量的容器
Vuex
state用来存放共享变量的地方
state
getter,可以增加一个getter派生状态,(相当于store中的计算属性),用来获得共享变量的值
getter
store
mutations用来存放修改state的方法。
mutations
actions也是用来存放修改state的方法,不过action是在mutations的基础上进行。常用来做一些异步操作
actions
action
$bus
attrs
listeners
Provide
Inject
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一、组件间通信的概念
开始之前,我们把组件间通信这个词进行拆分
都知道组件是
vue
最强大的功能之一,vue
中每一个.vue
我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件(.vue
)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI
框架中的table
组件,可能会往table
组件中传入某些数据,这个本质就形成了组件之间的通信二、组件间通信解决了什么
在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话,我们可以看到通信的本质是信息同步,共享回到
vue
中,每个组件之间的都有独自的作用域,组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据,这也是组件通信的目的要让它们互相之间能进行通讯,这样才能构成一个有机的完整系统二、组件间通信的分类
组件间通信的分类可以分成以下
关系图:
三、组件间通信的方案
整理
vue
中8种常规的通信方案props传递数据
props
属性,定义接收父组件传递过来的参数Children.vue
Father.vue
组件$emit 触发自定义事件
$emit触发
自定义事件,$emit
第二个参数为传递的数值Chilfen.vue
Father.vue
ref
ref
ref
来获取数据父组件
EventBus
EventBus
$emit
触发自定义事件,$emit
第二个参数为传递的数值$on
监听自定义事件Bus.js
Children1.vue
Children2.vue
$parent
或者$root
搭建通信桥连兄弟组件
this.$parent.on('add',this.add)
另一个兄弟组件
this.$parent.emit('add')
$attrs
和$listeners
prop
被识别 (且获取) 的特性绑定 ( class 和 style 除外)。v-bind="$attrs"
传⼊内部组件provide 与 inject
provide
属性,返回传递的值inject
接收组件传递过来的值祖先组件
后代组件
vuex
适用场景: 复杂关系的组件数据传递
Vuex
作用相当于一个用来存储共享变量的容器state
用来存放共享变量的地方getter
,可以增加一个getter
派生状态,(相当于store
中的计算属性),用来获得共享变量的值mutations
用来存放修改state
的方法。actions
也是用来存放修改state的方法,不过action
是在mutations
的基础上进行。常用来做一些异步操作小结
props
与$emit
进行传递,也可选择ref
$bus
,其次可以选择$parent
进行传递attrs
与listeners
或者Provide
与Inject
vuex
存放共享的变量The text was updated successfully, but these errors were encountered: