What are the communication methods of vue?

Communication method: 1. The sub-component sets the props attribute and defines the parameters passed by the parent component; the component passes the value through literals when using the sub-component tag. 2. Subcomponents trigger custom events through $emit to communicate. 3. Use ref for communication. 4. Use EventBus for communication. 5. Use $parent or $root to communicate. 6. Use $attrs to communicate with $listeners. 7. Use provide and inject to communicate. 8. Use vuex.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

We all know that components are one of the most powerful functions of vue. We can regard each .vue in vue as a component. Communication refers to the sender transmitting information in a certain format through a certain media. to the recipient to achieve a certain purpose. Broadly speaking, any information traffic is communication between components, which means that components (.vue) pass information in some way to achieve a certain purpose. For example, when we use the table component in the UI framework, we may go to the table component. Certain data is passed in, and this essentially forms the communication between components.

1. What is solved by communication between components?

In ancient times, people passed messages through inns, flying pigeons, beacon fire alarms, symbols, language, eyes, touches, etc. Today, with the rapid development of science and technology, communication is basically completed by wired or wireless. Various communication methods such as wired telephones, landline telephones, wireless telephones, mobile phones, the Internet and even video telephones have appeared one after another. From the above From this passage, we can see that the essence of communication is information synchronization. Sharing is back to vue. Each component has its own scope. Data between components cannot be shared. However, in actual development work, we often need Let components share data, which is also the purpose of component communication. Let them communicate with each other, so as to form an organic and complete system

2. Classification of communication between components

The classification of inter-component communication can be divided into the following

• Communication between parent and child components

• Communication between sibling components

• Communication between ancestor and descendant components

• Communication between non-relational components

Relationship diagram:

3. Communication scheme between components

Organize 8 conventional communication schemes in vue

• Pass through props

• Trigger custom events through $emit

• Use ref

• EventBus

• $parent or $root

• attrs and listeners

• Provide and Inject

• ##Vuex

props pass data

• Applicable scenarios: parent component passes data to child component

• The child component sets the props attribute and defines the receiving parent component The passed parameters

• The parent component passes the value through literals in the child component tag

Children.vue

props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}

Father.vueComponent

<Children name="jack" age=18 />

$emit triggers a custom event

Applicable Scenario: The child component passes data to the parent component

The child component triggers a custom event through $emit, and the second parameter of $emit is the passed value

The parent component binds the listener to obtain the child Parameters passed by the component

Chilfen.vue

this.$emit('add', good)

Father.vue

<Children @add="cartAdd($event)" />

ref

• The parent component is set when using the child component

  ref

• The parent component is set by Child component

  refTo get data

Parent component

<Children ref="foo" />  
  
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

EventBus

• Usage scenarios: sibling components pass values

• Create a central event bus EventBus

• Sibling components pass $emit Trigger a custom event, the second parameter of $emit is the passed value

• Another sibling component listens to the custom event through $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 or $ root

• Build a communication bridge through the common ancestor $parent or $root

Sibling component

this.$parent.on('add',this.add)

Another sibling component

this.$parent.emit('add')

$attrs and $ listeners

• Applicable scenarios: ancestors passing data to descendants

• Set batch upload attributes $attrs and $listeners

• 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。

• 可以通过 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(&#39;some-event&#39;, &#39;msg from grandson&#39;)">  
{{msg}}  
</div>

provide 与 inject

• 在祖先组件定义provide属性，返回传递的值

• 在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:'foo'  
    }  
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

vuex

• 适用场景: 复杂关系的组件数据传递

• Vuex作用相当于一个用来存储共享变量的容器 

• state用来存放共享变量的地方

• getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

• mutations用来存放修改state的方法。

• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

• 父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择ref

• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递

• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject

• 复杂关系的组件数据传递可以通过vuex存放共享的变量

【相关推荐：vuejs视频教程、web前端开发】

The above is the detailed content of What are the communication methods of vue?. For more information, please follow other related articles on the PHP Chinese website!