Several ways for components to communicate…

1. The father the son

  • It is worth noting that this data is passed from the parent to the childA one-wayThat is, the child component cannot directly modify the data passed by the parent component, if forced to modifypropsThe value inside will give you a warning.
  • If you really need to change this value, it is recommendedcomputedAnd, of course, indataTo define a variable to receivepropsThe value of theta is also ok.

The parent components – parent. Vue

<template>
  <div>
    <Child :message="msg"></Child>
  </div>
</template>
<script>
  import Child from "./child";
  export default {
    components: {
      Child,
    },
    data() {
      return {
        msg: "hello vue!"}; }};</script>
<style scoped></style>
Copy the code

Child components – child. Vue

<template>
  <div>
    <p>{{ message }}</p>

    <p>{{ myMsg }}</p>
  </div>
</template>
<script>
  export default {
    // props:["message"],
    props: {
      message: {
        type: String.// default: ""
        default() {
          return "";
        },
      },
    },
    data() {
      return {};
    },
    computed: {
      myMsg() {
        return this.message; }},methods: {}};</script>
<style scoped></style>
Copy the code

2. The father

  • Here you need to use custom events, which are used in child componentsThis. $emit (myEvent, value)Trigger, and then used in the parent component@myEventListening in.

Child components – child. Vue

<template>
  <div>
    <button @click="toParent">Pass the value to the parent component</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: "hello vue!"}; },methods: {
      toParent() {
        this.$emit("pushValue".this.message); ,}}};</script>
<style scoped></style>
Copy the code

The parent components – parent. Vue

<template>
  <div>
    <Child @pushValue="getChildValue"></Child>
  </div>
</template>
<script>
  import Child from "./child";
  export default {
    components: {
      Child,
    },
    data() {
      return {
        msg: "hello vue!"}; },methods: {
      getChildValue(value) {
        console.log(value); // hello vue!,}}};</script>
<style scoped></style>
Copy the code

3. Value transfer between sibling components

  • Use custom events$emitTrigger and listen capabilities, define aCommon eventBus eventBusAs an intermediate bridge, we can pass values to any component.

EventBus — eventbus.js

import Vue from "vue";
export default new Vue();
Copy the code

Child components – child1. Vue

<template>
  <div>
    <button @click="toBrother">Pass the value to the sibling component child2</button>
  </div>
</template>
<script>
  import eventBus from "./eventBus";
  export default {
    data() {
      return {
        num: 0}; },methods: {
      toBrother() {
        eventBus.$emit("pushValue"The + +this.num); ,}}};</script>
<style scoped></style>
Copy the code

Child components – child2. Vue

<template>
  <div>
    <p>Child1: {{myNum}}</p>
  </div>
</template>
<script>
  import eventBus from "./eventBus";
  export default {
    data() {
      return {
        myNum: 0}; }, mounted() { eventBus.$on("pushValue", (value) => {
        this.myNum = value; }); }};</script>
<style scoped></style>
Copy the code

The parent components – parent. Vue

<template>
  <div>
    <brotherChild></brotherChild>
    <child></child>
  </div>
</template>
<script>
  import brotherChild from "./brotherChild";
  import child from "./child";
  export default {
    components: {
      brotherChild,
      child,
    },
  };
</script>
<style scoped></style>
Copy the code

4. Route transmission

  • ifA componentJump toB component
/ / A component
this.$router.push({
  name: "B".query: {
    id: 1.name: "Tom",},// params: {
  // id: 1,
  // name: "Tom",
  / /},
});
Copy the code
/ / B component
this.$route.query.id;
this.$route.query.name;
// this.$route.params.id;
// this.$route.params.name;
Copy the code

5. Use the $ref

  • through$refThe ability to define an ID for the child component through which the parent component canDirect access to methods and properties in child components

The parent components – parent. Vue

<template>
  <div>
    <child ref="child1"></child>
    <button @click="useRefs">Invoke the properties and methods of the child component</button>
  </div>
</template>
<script>
  import child from "./child";
  export default {
    components: { child },
    data() {
      return {
        number: 0}; },methods: {
      useRefs() {
        this.$refs.child1.updateNum(); ,}}};</script>
<style scoped></style>
Copy the code

Child components – child2. Vue

<template>
  <div>
    <p>Parent component calls child component properties or methods: {{num}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        num: 0}; },methods: {
      updateNum() {
        ++this.num; ,}}};</script>
<style scoped></style>
Copy the code

6. Provide and inject

  • provideAllows us to specify what we want to provide to future generations of componentsData/methodsThen, inAny descendant componentWe can all use itinjectTo the current instanceInject the parent component’s data/methods:

The parent components – parent. Vue

<template>
  <div>
    <child></child>
    <input v-model="message" />
    <input v-model.number="obj.age" />
  </div>
</template>
<script>
  import child from "./child";
  export default {
    components: { child },
    data() {
      return {
        message: "hello vue!".obj: {
          age: 18.name: "Bill",}}; }, provide() {return {
        that: this.getObj: this.obj,
        putMethod: this.outPutLog,
      };
    },
    methods: {
      outPutLog(value) {
        console.log(value); // hello vue inject,}}};</script>
<style scoped></style>
Copy the code

Any descendant component –child.vue

<template>
  <div>
    <p>Child component injection dependency: {{that.message}}</p>
    <p>{{getObj. Name + "year" + getObj. Age + "year "}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    },
    inject: ["that"."getObj"."putMethod"],
    mounted() {
      this.putMethod("hello vue inject"); }};</script>
<style scoped></style>
Copy the code

7. $parent

// Get the parent component's data
this.$parent.message;

// Write data to the parent component
this.$parent.message = 2;

// Access the computed properties of the parent component
this.$parent.bar;

// Call the parent component's methods
this.$parent.func1();
Copy the code

8. Vue.observable(object)

  • As components become more refined and data sharing between multiple components becomes more common,vuexCan be used to solve the problem of component data sharing, but when developing a small application, in order to avoid redundant and complex code, can be usedVue serverThe one providedAPI—observable API, it can easily deal with some multi-component data sharing problems.
  • If the projectvueVersion belowserverAnd use it againVue.observable(object)At this point, you need to upgradevueandvue-template-compilerVersion: The two versions must be updated at the same time; otherwise, an error message will be displayed.
// Upgrade the version
npm update vue -S "或者" yarn add vue -S

npm update vue-template-compiler -S "或者" yarn add vue-template-compiler -D
Copy the code

Observable (Object) Vue. Observable (object)

Here is a code example

Start by creating a store.js in the SRC directory that provides a Store and mutations object that provides some methods.

Component1 can jump to Component2

store.js

import Vue from "vue";

export let store = Vue.observable({ name: "Bill".age: 18 });
export letmutations = { setAge(age) { store.age = age; }, setName(name) { store.name = name; }};Copy the code

Component1

<template>
  <div>
    <p>{{this.name + "this" + this.age + "age"}}</p>
    <input
      type="text"
      v-model="myName"
      @change="changeName(myName)"
      placeholder="Name"
    />
    <input
      type="text"
      v-model="myAge"
      @change="changeAge(myAge)"
      placeholder="Age"
    />
    <div>
      <button @click="routerPush">Jump to Component2</button>
    </div>
  </div>
</template>
<script>
  import { store, mutations } from "@/store";
  export default {
    name: "Component1",
    data() {
      return {
        message: "hello vue!".myName: "".myAge: ""}; },computed: {
      name() {
        return store.name;
      },
      age() {
        returnstore.age; }},methods: {
      changeName: mutations.setName,
      changeAge: mutations.setAge,
      routerPush() {
        this.$router.push({
          name: "Component2"}); ,}}};</script>
<style scoped></style>
Copy the code

Component2

<template>
  <div>
    <p>{{ age }}</p>
  </div>
</template>
<script>
  import { store, mutations } from "./store";
  export default {
    name: "Component2",
    data() {
      return {};
    },
    computed: {
      age() {
        returnstore.age; ,}}};</script>
<style scoped></style>
Copy the code

9. vuex

  • It is too long to go into details ~~~~

Please move to: Vuex