组件通信
- 为什么要进行组件通信?
组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件相互之间要建立联系
,这个联系我们就称之为通信 - 组件通信的方式有以下几种( 王者级 )
- 父子组件通信
使用props来实现 - 子父组件通信
自定义事件自定义事件 1. 自定义的 通过 $on 定义 $emit触发 2. 通过绑定在组件身上定义,通过 $emit触发 子父通信流程 1. 在父组件的模板中,通过事件绑定的形式,绑定一个自定义事件在子组件身上 <Son @aa = "fn"/> //这边要注意: fn是要在父组件配置项methods中定义 2. 在子组件的配置项methods中写一个事件处理程序,在事件处理程序中触发父组件绑定的自定义事件 Vue.component('Son',{ template: '#son', data () { return { hongbao: 500 } }, methods: { giveFather () { //如何进行父组件给子组件的自定义事件触发 this.$emit('give',this.hongbao) } } }) 3. 将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上 <template id="son"> <div> <button @click = "giveFather"> give </button> <h3> 这里是son组件 </h3> </div> </template>
- 父子组件通信
- 非父子组件通信
ref链: 可以实现非父子组件的通信,但是如果层级太多,就比较繁琐了 $attrs
bus事件总线 - 多组件状态共享( 多个组件共用同一个数据 ) 大知识点( vuex )
vuex
接下来的几种方式是非常规手段,是你不得已才使用的,砸门是不推荐的
app实例的手动挂载
new Vue({
}).$mount('#app')
自定义事件
-
自定义的 通过 $on 定义 $emit触发
var vm = new Vue({ el: '#app' }) // 自定义事件的定义( 发布 ) // vm.$on(自定义事件的名称,自定义事件的事件处理程序) vm.$on( 'aa', function () { console.log( 'aa' ) }) //自定义事件的触发 ( 订阅 ) // vm.$emit( 自定义事件的名称,自定义事件处理程序需要的参数1,参数2,参数3) vm.$emit( 'aa' )
-
通过绑定在组件身上定义,通过 $emit触发
<Son @aa = “fn”/>使用: 子父通信