22-vue component communication five ways (summary): props, custom events, ref\refs, message subscription and publication (pubsub-js library), slot method

The first type of props

  The parent component uses: (short for v-bind) to pass, the child component uses props to receive, and the type is indicated

Code example

Parent component code:

<template>
	<TodoHeader :addTodo="addTodo"/>
</template>

Sub-component code:

export default{
	props:{
		addTodo：Function
	}
}

 

The second custom event

  The parent component uses @ (short for v-on) to bind the event, and the child component (in methods) uses the vue instance method $emit ("event name", parameter) to receive

Code example

Parent component code:

<TodoHeader @addTodo="addTodo"/>  //绑定事件监听

Sub-component code:

methods:{
	// 触发事件
	 this.$emit("addTodo",todo);  //将方法addTodo(todo) 的拆分  addTodo为方法名  todo为方法的参数
}

this.$emit("method name", parameter in the method)

 

The third ref\refs

  The parent component uses ref to register information for the child component, and writes the vue instance method refs.ref. $on("event name", callback function) in mounted

Code example

Parent component code:

<template>
	 <TodoHeader ref="Header"/>
</template>

new Vue({
	mounted () {//执行异步代码
      //给Header组件绑定事件监听（第三种方式）
      this.$refs.Header.$on("addTodo",this.addTodo)  //（函数名，回调函数）
    }
})

Sub-component code:

methods:{
	 this.$emit("addTodo",todo);  //将方法addTodo(todo) 的拆分  addTodo为方法名  todo为方法的参数
}

 

Subscription and publication of the fourth message

  pubsub library: YesImplement cross-componentInformation communication, get rid of the cumbersome transfer of information layer by layer.
  For details, please see my next article "One of the communication methods of components in 24-vue: the use of message subscription and publication, and the installation of pubsub-js library" The link is as follows:
  Link: One of the communication methods of components in 24-vue : Use of news subscription and publication, installation of pubsub-js library .

 

The fifth slot

understanding

  Slot slot, insert the carried content into a certain position, making this position reusable, and thus, this position can be replaced with different tags.

The difference between slot and other communication methods

  The communication method slot communication islabel, And data communicated by other communication methods (including functions, arrays, parameters, variables, etc.).

Instructions

  Use the slot method to transfer the label used by the latter to the child component in the parent component, and the corresponding method in the label should also be written in the parent component. In short, when slot is used, the tags and methods used by the child component must be declared and defined in the parent component, and then passed through the slot.

Code example

Parent component code:Add slot="slotName" attribute to the label to be passed to the child component

<todo-footer>
	<input type="checkbox" v-model="isAllCheck" slot="check"/>
	<span slot="count">已完成{
   
   {completeSize}} / 全部{
   
   {todos.length}}</span>
	<button slot="delete" class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>//相应的方法应该在父组件vm中定义声明
</todo-footer>

Sub-component code:Set the slot <slot name="xxx">

<template>
  	<div class="todo-footer">
		<!-- 使用slot之前的写法-->
	 	<!--    <button class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>-->
    
    <!--使用slot插槽方法-->
		<slot name="delete"></slot>
  	</div>
</template>

 

Note:
  When using the custom event method, it is more convenient. butSuitable for communication between parent and child components. Not suitable for situations where information is passed layer by layer.
  The third method is more complicated and not commonly used.

Skills
   for communication between parent and child components --> Use props method or custom event (more convenient)
  when you need to communicate layer by layer -->Subscribe and publish using messagesWhen direct communication
  components are reused a lot, --> use slot