Custom events in components

Custom events for components

1. A way of communicating between components , Apply to ：<strong style="color:red"> Child components ===> Parent component </strong>

2. Use scenarios ：A It's the parent component ,B It's a subcomponent ,B Want to give A The data transfer , Then it's in A Middle feeding B Binding custom events （<span style="color:red"> The callback of the event is in A in </span>）.

3. Binding custom events ：

    1. The first way , In parent component ：```<Demo @atguigu="test"/>```   or ```<Demo v-on:atguigu="test"/>```

    2. The second way , In parent component ：

        ```js

        <Demo ref="demo"/>

        ......

        mounted(){

           this.$refs.xxx.$on('atguigu',this.test)

        }

        ```

    3. If you want a custom event to be triggered only once , have access to ```once``` Modifier , or ```$once``` Method .

4. Trigger custom event ：```this.$emit('atguigu', data )```    

5. Unbind custom events ```this.$off('atguigu')```

6. Components can also be bound to native DOM event , Need to use ```native``` Modifier .

7. Be careful ： adopt ```this.$refs.xxx.$on('atguigu', Callback )``` When Binding custom events , Callback <span style="color:red"> Or configure it in methods in </span>,<span style="color:red"> Or use the arrow function </span>, otherwise this There will be problems ！

design sketch

 

Parent component generation

 <div>
    <div class="demo">
      <h3> The name of the school {
   { name }}</h3>
      <h3> School address {
   { address }}</h3>
      <h4 v-show="stuName"> Student name received {
   { stuName }}</h4>
    </div>
    <!-- @getStuName Is a custom time name  -->
    <Student @getStuName="getStuName"></Student>
  </div>

 

<script>
import Student from "./Student.vue";
export default {
  name: "School",
  components: { Student },
  data() {
    return {
      name: "atguigu",
      address: " Beijing ",
      stuName: "",
    };
  },
  methods: {
    getStuName(name) {
      console.log(" I am a School", name);
      this.stuName = name;
    },
  },
};
</script>

Subcomponent code

<div class="demo">
    <h1> The student's name {
   { name }}</h1>
    <button @click="send(name)"> Click on </button>
  </div>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: " Zhang San ",
    };
  },
  methods: {
    send(name) {
//$emit Call custom events 
      this.$emit("getStuName", name);
    },
  },
 //    Unbind custom events 
  beforeDestroy() {
    this.$off("getStuName");
  },
};
</script>

The second method

utilize ref choice

 <div>
    <div class="demo">
      <h3> The name of the school {
   { name }}</h3>
      <h3> School address {
   { address }}</h3>
      <h4 v-show="stuName"> Student name received {
   { stuName }}</h4>
    </div>
    <!-- @getStuName Is a custom time name  -->
    <Student ref="Stu"></Student>
  </div>

import Student from "./Student.vue";
export default {
  name: "School",
  components: { Student },
  data() {
    return {
      name: "atguigu",
      address: " Beijing ",
      stuName: "",
    };
  },
  methods: {
    getStuName(name) {
      console.log(" I am a School", name);
      this.stuName = name;
    },
  },
  mounted() {
//$on The binding event 
    this.$refs.Stu.$on("getStuName", this.getStuName);
  },
};
</script>