eventsMixin

Also feel a little bit tired 😫, learn so much in the past two days, had less reasonable task should be able to more easily, but now I only match, the first is to learn the react for technical breadth aspect, wrote a small demo, and then the grasp of the working technology also look at taro (now I stay in the small company… Emmmm actually is not small, just because the company direction, center of gravity in the offline entities, for technical support, which is 20 people, and now also in iteration, the development of a web project, a WeChat public, a small program, WeChat weex external shell, a set of layer weex this project may be abandoned), The most important thing is that I am not satisfied with my personal soft strength, so I want to continue my postgraduate study. Maybe International MBA, maybe independent enrollment of postgraduate students. During this period of time, I have understood the advantages and disadvantages of each postgraduate entrance examination, and began to prepare for the English entrance examination. It’s exhausting…

Don’t say much! Today is a simple and straightforward explanation of vUE source code, let’s talk about eventsMixin, let’s talk about this when you look at the audience please think, in vue development when how to add events and call events

This module starts by talking about component communication

One boring knowledge point 1 ️

$on

The first is the $ON instance method on the vue instance, which takes two arguments. The first argument can be a string or an array. For more than ten years, I have not understood the use of these invisible ways, you see the officer learned it, the second parameter to receive a method, combined with the code we see the first parameter passed into the array has what advantage

You can see the code. The first argument is passed in an array that can bind multiple events to one method

$off

$on = $on; $on = $on; $on = $on; $on = $on Or I don’t have the corresponding value (vm) _events [event] | | (vm) _events [event] = [])), push (fn) this??????? The vm._events object holds key-value pairs, which are an array, and you can add methods to the event.

$once

$once is a function that binds a custom event to a Vue component instance, but this event can only be raised once and then removed.

$emit

The best ingredients are always the easiest to cook and the most important things are always the easiest to understand. $emit is over! End and spend

Expand the knowledge

One boring knowledge point 1 ️

Component communication I’ll talk about vue2.0, VUe3.0 and react implementation

1. First, a summary of VUe2.0

  • You can use props to pass a reference from a parent component to a child component. In this example, you can use props to pass a reference from a parent component to a child component. Be sure to declare the props property in the child component! Otherwise this will be saved in vue.prototype.$attrs and used in the child component (props:[‘custom’])

  • The second way is to use the Vuex state management tool (these are not covered in this section, I will save the details for later).
  • The third way is for the child component to be passed by the parent component using $emit
  • The fourth is to use the local cache localStorage
  • The fifth is to use the page’s memory cache seesionStorage
  • The sixth is to use the injection properties provide and Inject
  • The fourth type is the global bus event bus
  • Scope slots are also passed from a child component to a parent component

2. Talk about VUe3.0 and compare it with VUe2.0

  • First, the use of props was retained
  • Vuex status management tool is reserved
  • In vue3.0, $emit is a property method stored in the context of the second parameter received by setup. In vue3.0, $emit is a property method stored in the context of the second parameter received by setup. You need to declare this on instances, similar to props
  • Local caches are available
  • Memory caches are available
  • Provide and Inject are available
  • The global bus needs to be realized by plug-in, and I used Mitt
  • The scope slot still exists

3. React

  • The react function component receives props as an argument. The class component props as an argument in constructor and can also get props from this
  • Redux is a state management tool in React
  • The cache belongs to the browser and can be used by every framework