Introduce the Vue

This is the fifth day of my participation in Gwen Challenge

Vue is a progressive framework for building user interfaces. It is MVVM(Model-View-View Model) framework, which pays more attention to the view layer. Vue is a boon to current front-end developers with its simple API for responsive data binding and composite view components. Components are one of the most powerful features in Vue. Components can extend HTML elements, encapsulate reusable code, and abstract complex pages into multiple independent modules, greatly improving development efficiency and reducing later maintenance costs. I still remember that when I first got in touch with Vue, the leaders of the department always advocated component-based development, packaging reusable functions into individual components as much as possible. When I think about it now, I really appreciate them. Once the habit of packaging components was formed, it was really easy to develop. Now that we’re talking about components, we’re talking about component communication, because most pages that use Vue are composed of components. The following is a typical image from Ctrl C + Ctrl V, illustrating the mapping between Vue pages and the component tree.

Parent-child component communication

Parent-child components are, as the name suggests, components that have containment relationships. B and C(or D), E and F(or G and H), and even the entire application and A(or B and E) are all parent-child components.

The parent component passes the value to the child component via prop, the child component passes the event name to the parent component through the $emit method, and the parent uses $ON to bind the event to listen for the passed value.

Here’s a simple example that should make sense:

Subcomponent title.vue:

<template>
    <div>
       {{ titleText }}
       <button @click="changTitle"></button>
    </div>
</template>
<script>
export default {
    props: {
        titleText: String
    },
    methods: {
        changeTitle() {
            thid.$emit('doChange'.'My title has been changed')}}}</script>
Copy the code

The parent component showTitle. Vue

<template>
   <div>
       <Title :titleText="titleText" @doChange="doChange"></Title>
   </div>
</template>
<script>
import Title from './Title.vue'
export default {
     data(){
        return {
            TitleText: 'Show me my title.'}},methods: {
        doChange(val) {
            console.log(val) // Val is the value passed by the child component}}}</script>
Copy the code

Sibling communication

Sibling components can be understood as sibling components, commonly understood as components under the same parent component. In the figure above, A and B(or E), C and D, and F and G(or H) are siblings.

The communication between brother components is also easy to understand. What is the biggest connection between two brothers? Of course, they have the same father, and without the same father, they will not be brothers. For example, if C and D want to pass a parameter to each other, C can pass the parameter to B (the child to the parent), and THEN B can pass the value to D (the parent to the child).

Sibling communication can also be implemented by creating an EventBus:

Start by creating a bus.js file in your project as follows

import Vue from 'vue'
const bus = new Vue()
export default bus
Copy the code

The bus file is then introduced into the sibling component that needs to communicate

import bus from 'bus.js'
Copy the code

Use bus.$emit() in components that need to pass arguments

bus.$emit('test'.'1233')
Copy the code

Use bus.$on() in components that need to accept arguments

bus.$on('test'.data= >{
   console.log(data) / / output 1233
})
Copy the code

Cross-level component communication

Cross-level component communication is actually the communication between grandparent and grandchild components or even more distant components. There are many ways to communicate across tiers of components, and the way to create a BUS mentioned above also applies here.

Components can also use Vuex to transfer values across levels. Vuex helps us manage shared state by managing the state of all components of an application in a centralized store, with rules to ensure that state changes in a predictable way. Vuex solves the problem of multiple views relying on the same state and behavior from different views changing the same state, focusing developers’ efforts on updating data rather than transferring data between components (learn how to use Vuex on the Vuex website).

Provide/Inject is also a value transfer method commonly used by cross-level components

Provide can specify data or methods that we want to provide to descendant components in ancestor components. In descendant components, we can use inject to receive data or methods provided by provide, as a simple example

Ancestors components

<template>
    <div>
    {{ title }}
    </div>
</template>
<script>
    export default {
        provide() {
            return {
                title: this.title
            }
        },
        data() {
            return {
                title: 'Title la la'}}}</script>
Copy the code

Sun components

<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  inject: ["title"].mounted() {
    console.log(this.title)
  },
};
</script>
Copy the code

The article has the inadequacy place also asks everybody to give advice more.