If you don’t have the following questions, the article is useless.

  1. Component creation and reference
  2. Interaction between parent and child components
  3. Component to component interaction

0.1 Talking about Components

I had a deep misunderstanding about components at the beginning. I personally forced components in the Web to be equal to Buttons and listviews in Android, which was wrong. The division of components is not so strict, a button can be a component, the navigation bar of the page can be a component. It is best to have as few large components as possible on a single page, and within large components, as many small ones with similar functions as possible. The navigation bar can be a big component, the content can be a big component, and the navigation bar can contain the logo, the navigation of specific columns.

The above is my personal understanding.

Component creation and reference

I’m talking about a single file system here, a.vue is a component. In a single file system, a *.vue file contains the script, style, and template tags. So, how do you use components from B.ue in A.ue?

import  view from 'xxx/xxx/xxx.vue'
import  Vue  from 'vue';
Vue.component('Your favorite tag name',view) 
Copy the code

So in a’s template, you can use B in this way

<template> < name of the tag you like ></ name of the tag you like >< template>Copy the code

And then, from that, you get a whole bunch of other problems

  • How do you send data to a child component?
  • How to use the data received from the parent component in the child component?
  • So how does the child report to the parent when it has done something?

A: I don’t know. See chapter 2.

2. Interaction between components

  • How do you send data to a child component? prop
  • How to use the data received from the parent component in the child component? slot
  • So how does the child report to the parent when it has done something? If it’s just simple, use custom things, and if it’s complex, use vuex mentioned in Chapter 3.

In fact, official documents have these use, address point me. But I this is more after reading a key ah! I think IT is more convenient for me to understand and use ~

2.1 prop

Is really feel the official website of the Chinese tutorial written well, spend 10 minutes can read it, really do not want to simply copy over the water, boring. Just add the definition in the order file:

<template>
  <span>{{ message }}</span>  
</template>
<script>
exportDefault {// declare props: ['message'} <style > </style>Copy the code

2.2 slot

Add: how to understand the slot. If the child component wants to receive the content display from the parent component, where should it be displayed? How do you use child components? This leads to this label, see B. value, which is used to receive data from the parent component such as A.value (send data, irrespective of slot).

<div> <h1> I'm the parent component title </h1> <my-component> <p> Here's some initial content </p> <p> </my-component> </div> </template>Copy the code

B. Ue (Data collection)

<div> <h2> I am the title of the child component </h2> <slot> is displayed only if there is no content to distribute. </slot> </div>Copy the code

Finally, it shows:

< div > < h1 > my father is the title of the component < / h1 > < div > < h2 > I am a child component of title < / h2 > < p > this is some of the initial content < / p > < p > this is more of the initial content < / p > < / div > < / div >Copy the code

Slot can also specify a name to receive data. For more details, see the official website

2.3 event

Use custom events to do some child interaction with the parent

  • On (eventName) Listens for events
  • Emit (eventName) triggers an event

Let me cut the template from the website and explain it in more detail.

<div id="counter-event-example"> <p>{{ total }}</p> <! IncrementTotal is the function name --> <! -- button-counter is a child component --> <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Copy the code

You can see that the parent subscribed to the event Increment, so naturally the word component must have triggered increment. Here is the parent’s JS again:

el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
Copy the code

Template for child components:

<button v-on:click="incrementCounter">{{ counter }}</button>
Copy the code

Js for child components:

data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')}}Copy the code

As you can see from the code, the child component’s click can trigger incrementCounter function, which in turn emits increment event. Please refer to the website for more details

3 Component Communication between components

If:

  • A child component in A. ue wants to communicate with a child component in B. ue
  • A. ue wants to communicate with a child component in B. ue
  • A child component in A. ue wants to communicate with B. ue
  • A child component of a child component of A. ue wants to communicate with a child component of B. ue
  • .

Think vexed ah, at this time, to the overall VUEX, is the state management ~ this pit is worth another article, such as a two.