vue组件通信的五种方式:props、绑定监听、pubsub订阅消息、slot插槽、vuex

组件通信的五种方式

  • 1 组件逐层通信:props方式
  • 2 父子间通信:自定义事件方式
    • ①自定义事件监听
      • v-on监听(常用)
      • $on监听(少用)
    • ②用 $emit 触发自定义事件
  • 3 组件间通信:订阅和发布消息方式
  • 4 组件间通信:slot插槽
  • 5 组件间通信:vuex (待更新...)

1 组件逐层通信:props方式

v-bind数据绑定,用prop逐层传递
父组件

<template>
    //传函数
	<childen :toDo="toDo" />
</template>

<script>
...
	compontents:{
		childen 
	}
</script>

子组件

<script>
export default{
	props:{
			toDo:Function
			...
		}
}
</script>

2 父子间通信:自定义事件方式

以下是用自定义事件实现父子组件通信的两个过程:绑定事件监听和触发

①自定义事件监听

监听的两种方式:一是v-on,即@。二是vue对象函数的实例方法$on。

v-on监听(常用)

@eventName=“function”
父组件

<template>
   //
	<childen v-on:toDo="toDo" />
</template>

<script>
...
	compontents:{
		childen 
	}
</script>

$on监听(少用)

父组件

<template>
	  <childen ref="child"/>
</template>
<script>
...
   mounted(){ //执行异步代码
         this.$refs.child.$on('toDo',function)
        },
</script>

题外话:监听不是监视,监视是侦查具体属性的变化,可以自动执行。监视分有普通监视computed:{set(){}}和深度监视watch:{}

②用 $emit 触发自定义事件

用$emit触发事件,并返回数据到定义函数中执行回调函数
子组件

<script>
    export default {
	    ...
	    methods:{
	    const data = ...;
	    this.$emit('toDo',data)
	    }
    }
</script>

3 组件间通信:订阅和发布消息方式

订阅消息和发布消息可以实现跨组件通信,比前几个方式都方便许多,在代码编写上和“ o n 事 件 监 听 + on事件监听+ on+emit事件触发“格式类似。具体过程如下所示:

先在项目下安装pubsub-js库,库内包含subscribe订阅消息和publish发布消息方法。

npm install --save pubsub-js

在父组件中导入pubsub-js库后,将订阅消息 放在父组件的mounted中,执行异步代码

    import PubSub from  "pubsub-js"
    
    export default {
     mounted(){
          PubSub.subscribe('deleteTodo',
                (msg,index)=>this.deleteTodo(index)
                     )
        }
 	}
 	
    methods: {
    //自定义函数
           deleteTodo(index){
                console.log(index);
            }
    }
}

在子组件中同样导入pubsub-js库,然后发布消息

	import PubSub from 'pubsub-js'
    PubSub.publish('deleteTodo',index)

工作过程可以这样理解:
先在子组件中发布消息,其中deleteTo是消息名,index是通信数据。然后父组件订阅消息deleteTodo(可以理解为接收消息),在订阅消息中的回调函数继续执行具体已定义的函数。

4 组件间通信:slot插槽

slot,译名插槽、站位。slot可以用来传标签,特别适合标签需要经常反复出现的组件,一个组件可以分好几个站位。
先在子组件emplate中写好插槽,并用name唯一标识插槽。如下所示就是三个不同的slot插槽checkAll、count、delete。

<template>
    <div class="todo-footer">
        <label>
            <slot name="checkAll"></slot>
        </label>
        <span>
            <slot name="count"></slot>
        </span>
        <slot name="delete"></slot>
    </div>
</template>

父组件在子组件中调用需要的插槽,不需要的就不调用。如下所示调用插槽checkAll、delete,未调用插槽count。

                <todo-footer>
                    <input type="checkbox" v-model="isAllCheck" slot="checkAll"/>
                    <button slot="delete" class="btn" v-show="isShow">完成</button>
                </todo-footer>

注意:所有与插槽有关的功能,都应该放在调用插槽结构的页面。如同此例,与v-show相关的isShow函数当放在父组件。

5 组件间通信:vuex (待更新…)

你可能感兴趣的:(Vue)