How Vue components communicate

How Vue components communicate

1, Props + $emit

Parent-child communication: the father provides data and passes it to the son through the props property. The son uses $ON to bind his father’s event and then triggers his own event (publish subscribe) via $emit.

The parent component:

    <template>
      <div class="navbar">
        <Child :msg="msg" @changeMsg="msg = $event"></Child>
      </div>
    </template>

    <script>
    import Child from "./Child.vue";

    export default {
      name: "Father".components: { Child },
      data() {
        return {
          msg: "hello son"}; }};</script>
Copy the code

Child components:

    <template>
      <div class="">
       {{msg}}
       <button @click="changeMsg"></button>
      </div>
    </template>

    <script>

    export default {
      props: ["msg"].name: "Child".data() {
        return{}; },methods: {changeMsg(){
          this.$$emit('changeMsg'.'hello father')}}};</script>
Copy the code

2. Callback functions

The use of the callback function is similar to the previous one.

The parent component:

    <template>
      <div class="">
       <Child :msg="msg" :changeFn="changeMsg"></Child>
      </div>
    </template>

    <script>
    import Child from './Child.vue'
    export default {
      name: "Father".components:{Child},
      data() {
        return {
          msg:'hello child'
        };
      },
      methods: {changeMsg(){
          this.msg="hello father"}}};</script>
Copy the code

Child components:

    <template>
      <div class="">
      {{msg}}
      <button @click="changeFn"></button>
      </div>
    </template>

    <script>
    export default {
      name: "Child".props: ['msg'.'changeFN'].data() {
        return{}; }};</script>
Copy the code

3. Use the father-son relationship$parent,$children

The parent component:

    this.$childfren[0] ['Child component properties or methods'] This.$childfren[0] identifies the first child
Copy the code

Child components:

    this.$parent['Parent component's property live method']
Copy the code

4. Use provide + Inject

The parent component provides the data and the child component injects it. · Provide ·, ·inject·, plug-ins are widely used.

Provide data in the parent component:

    <template>
      <div class=""></div>
    </template>

    <script>
    export default {
      name: "Father".provide: { msg: "hello son" },
      data() {
        return{}; }};</script>
Copy the code

Injecting consumption into child components:

    <template>
      <div class="">
        {{ msg }}
      </div>
    </template>

    <script>
    import Child from './Child.vue'
    export default {
      name: "Child".inject: ["msg"].data() {
        return{}; }};</script>
Copy the code

5, Use $listeners

$Listeners property: Contains all listeners for the component. Can be directly bound to a component child element.

Scene: Father -> son -> grandson

The parent component:

    <template>
      <div class="">
        <Child :msg="msg"></Child>
      </div>
    </template>

    <script>
    import Child from "./Child.vue";
    export default {
      name: "Father".components: { Child },
      data() {
        return {
          msg: ""}; }};</script>
Copy the code

Child components:

    <template>
      <div class="">
        <! Use listeners to access the properties of parent components directly
        {{$listeners.msg}}
        <GrandChild v-bind="$attrs"></GrandChild>
      </div>
    </template>

    <script>
    import GrandChild from "./GrandChild.vue";
    export default {
      name: "Child".components: { GrandChild },
      data() {
        return{}; }};</script>
Copy the code

Sun components:

    <template>
      <div class="">
        {{ $attrs.msg }}
      </div>
    </template>
    <script>
    export default {
      name: "GrandCHild".data() {
        return{}; }};</script>
Copy the code

Ref gets the component instance and calls its properties and methods

Ref gets the component instance and calls its properties and methods

The parent component:

    <template>
      <div class="">
        <Child :ref="childComponent"></Child>
      </div>
    </template>
    <script>
    import Child from "./Child.vue";
    export default {
      name: "Father".components: { Child },
      data() {
        return {};
      },
      created() {
        this.$$ref.childComponent.showMeLook();
        this.$ref.childComponent.msgs; // Access methods or properties of child components through registered child component examples}};</script>
Copy the code

Child components:

    <template>
     <div class=""></div>
   </template>
   <script>
   export default {
     name: "Child".data() {
       return {
         msgs: "i am son"}; },methods: {
       showMeLook() {
        this.msgs = "Alert (' I am child ')"; ,}}};</script>
Copy the code

7. Vuex state management implements communication and cross-component communication Event Bus

1. vuex State management enables communication
2. Vue.prototype.bus = new VueActually based on on and $emit