Guess what? I spent the Spring Festival taking notes. Happy New Year, everyone!!

1. Communication between non-parent and child components

There are two main ways:

  1. Provide/Inject
  2. Mitt Global event bus

1.1. Dojo.provide and Inject

Some deeply nested components, the lower component to get some information from the upper component

In this case, if we were still passing props down the component chain, it would be very troublesome

In this case, we can use Provide and Inject

  • Upper-layer components have a provide option to provide data to all lower-layer components
  • The underlying component has an Inject option to start using this data
  • The upper and lower levels don’t need to know who I’m feeding the data to, whose data I’m using

We demonstrate the use based on this structure


If some of the data provided in the above Provide is from data, we will get an error if we obtain it through this

Since this pointer is problematic, we can solve this problem by providing the function that returns the corresponding data and then loses the responsiveness

So the final code is:

1.2. Global event bus Mitt library

Vue3 removes the ON, ON, ON, off, and $once methods from the instance

So if we want to continue using the global event bus, we go through a third-party library

Vue3 officially has some libraries recommended, such as Mitt or Tiny-Emitter

Let’s talk about the use of mitt

NPM install mitt

We can package a tool called eventbus.js

Communicate using the event bus

Cancel the mitt wiretap

2. The slot

Allowing a parent component to insert HTML structures into its children at specified locations is also a way of communicating between components, and applies to parent components ===> children

Slots are also designed to make components more flexible and universal. For example, the navigation structure of a page is left, middle and right, but each page will be slightly different. At this time, I think it is necessary to consider slots

Categories: Default slot, named slot, scoped slot

2.1. Basic use of slots

There is a component, myslotcpn.vue, which has a slot where we can put what we want to display

Where this component is used, we can insert normal content, HTML elements, component elements that are written inside the component and eventually replace the slots of the child components

2.2. Default slots

Sometimes we use components that require slots without passing in the corresponding structure

By default, we can configure a content to display when no content is inserted

Multiple slots effect

If we wanted to insert different slots for different content, we would probably have to insert named slots

2.3. Named slot

A slot without a name carries the implied name default

Insert a slot name using the name attribute. Insert a v-slot name in the outer layer of template

The abbreviation for V-slot: is #, so it can also be shortened to #name, for example, #left

2.4. Dynamic slot names

The previous slot names were fixed, such as #left, # Center, etc

[dynamicSlotName] [dynamicSlotName] [dynamicSlotName] [dynamicSlotName]

2.5. Render scope

Everything in the parent template is compiled in the parent scope

Everything in a subtemplate is compiled in a subscope

2.6. Scope slot

We want the slot to have access to the content in the child component

The child passes the data to the parent, and the slot passes the data to the component used to decide how to insert the display

1. We defined the data in app. vue and passed it to the ShowNames component via props

2. The ShowNames component traverses the Names data and defines the prop of the slot

3. Obtain the props of the slot in V-slot :default or V-slot mode, and use item and index of slotProps

So the scope slot first requires us to pass a piece of data, then the component passes it back to the parent through the socket prop, and finally the parent picks up the data insert structure and places it in the corresponding

If there were only default slots, we could use V-slot directly on components

If multiple slots are present, use the full template notation for the slots

3.Vue2 global event bus and slot

3.1. GlobalEventBus

  1. A method of communication between components, applicable to communication between any component.

  2. Install the global event bus:

    new Vue({ ...... BeforeCreate () {vue.prototype.$bus = this,...... })Copy the code

  3. Using the event bus:

    1. Receive data: if component A wants to receive data, it binds A custom event to $bus in component A. The callback of the event remains with component A itself.

      methods(){ demo(data){...... }}... mounted() { this.$bus.$on('xxxx',this.demo) }Copy the code

    2. This.$bus.$emit(‘ XXXX ‘, data)

  4. It is best to use $off in the beforeDestroy hook to unbind events used by the current component.

3.2. Message Subscription and Publication (PUBSUB)

  1. A method of communication between components, applicable to communication between any component.

  2. Use steps:

    1. Install pubsub: NPM I pubsub-js

    2. Import pubsub from ‘pubsub-js’

    3. Receive data: If component A wants to receive data, it subscribes to the message in component A, and the subscribed callback remains in component A itself.

      methods(){ demo(data){...... }}... Mounted () {this.pid = subscribe(' XXX ', this.demo) // Subscribe message}Copy the code

    4. Publish (‘ XXX ‘, data)

    5. It is best to unsubscribe with pubsub. unsubscribe(PID) in the beforeDestroy hook.

3.3. Slot

Usage:

  1. Default slot:

    </div> </Category> <template> <div> <! -- Define slot --> <slot> slot default content... </slot> </div> </template>Copy the code

  2. Named slot:

    Parent component: <Category> <template slot="center"> <div> HTML structure 1</div> </template> <template V-slot :footer> <div> HTML structure 2</div> </template> <div> <! <slot name="center"> Slot default content... </slot> <slot name="footer"> </slot> </div> </template>Copy the code

  3. Scope slot:

    1. Understanding: The data is in the component itself, but depending on the structure of the data generation needs to be determined by the users of the component. (The Games data is in the Category component, but the structure traversed using the data is determined by the App component.)

    2. Specific code:

      <Category> <template scope="scopeData"> <! - generated is ul list - > < ul > < li v - for = "g scopeData. In games" : the key = "g" > {{g}} < / li > < / ul > < / template > < Category > < Category > <template slot-scope="scopeData"> <! <h4 v-for="g in scopedata. games" :key="g">{{g}}</h4> </template> </Category>  <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', Props: [' title '], / / the data in a data component itself () {return {games: [' red alert ', 'pass through the fire,' s', 'super Mario']}},} < / script >Copy the code