Vue CLI：组件自定义事件（$emit）

组件的自定义事件

使用场景：子组件给父组件传数据，那么就要在父组件中给子组件绑定自定义事件（事件的回调在父组件中）

绑定自定义事件

• 第一种方式： v-on 配合$emit
  • 父组件

    <!-- 父组件 -->
    <template>
      <div>  
        <Add v-on:custom-click="handleCustomEvent" @click="handleCustomEvent" />
        接收子组件的值： {{ name }}
      </div>
    </template>
     <script>
    import Add from "./AddE";
    export default {
      components: { Add },
      data() {
        return {
          name: "1",
        };
      },
      methods: {
        handleCustomEvent(name,...params) {
          console.log("父组件-handleCustomEvent", name,params); 
          this.name=name;
        },
      },
    };
    </script>
    
    

  • 子组件

    <template>
      <div>
        <input type="text" v-model="name" />
        <button @click="handleClick">点击</button>
      </div>
    </template>
     
     <<script>
     export default { 
         data() {
           return { name:''  }
         },
         methods: { 
           handleClick(){
              console.log("子组件点击了-handleClick"); 
              this.$emit('custom-click',this.name,"custom-click");
              this.$emit('click',this.name,"click");//触发 click 事件
           } 
         },
     }
     </script>

     

• 第二种方式： ref 配合$emit
  • 父组件

    <template>
        <Add ref="add" />
    </template>
     <script>
    ...
      mounted() { 
        this.$refs.add.$on("custom-click", this.handleCustomEvent); //绑定自定义事件
        setTimeout(() => {
          console.log("2秒后，添加自定义事件"); 
          this.$refs.add.$once("click", (name, ...params) => {
            console.log("父组件-click", name, params);
          }); //绑定自定义事件(一次性)
        }, 2000);
      }
    ....
    </script>

     

  • 子组件

    <template>
      <div>
        <input type="text" v-model="name" />
        <button @click="handleClick">点击</button>
      </div>
    </template>
     
     <<script>
     export default { 
         data() {
           return { name:''  }
         },
         methods: { 
           handleClick(){
              console.log("子组件点击了-handleClick"); 
              this.$emit('custom-click',this.name,"custom-click");
              this.$emit('click',this.name,"click");//触发 click 事件
           } 
         },
     }
     </script>

解绑自定义事件$off

     methods: {  
       unbind(){
        //  this.$off("custom-click")//解绑一个自定义事件
        //  this.$off(["custom-click",'custom-click2'])//解绑多个自定义事件
         this.$off()//解绑所有自定义事件 
         console.log("解绑自定义事件");
       },
     }

扩展:使用props实现 子组件===》父组件（传递一个回调函数）

• 父组件

  <template>
    <div>
       <!-- 通过props，传递一个回调函数 save1 -->
      <Add :callbackSave="handleCustomEvent"/> 
    </div>
  </template>
  
  <script>
  .....
    methods: {
      handleCustomEvent(name, ...params) {
        console.log("父组件-handleCustomEvent", name, params);
        this.name = name;
      },
    } 
  };
  .....
  </script>

   

• 子组件

  <template>
    <div>
      <input type="text" v-model="name" />
      <button @click="handleClick">点击</button>
    </div>
  </template>
   
  <script>
   export default { 
      props:["callbackSave"],//回调函数
       data() {
         return { name:''  }
       },
       methods: { 
         handleClick(){
            console.log("子组件点击了-handleClick"); 
             this.callbackSave(this.name,"callbackSave");  
         } 
       },
   }
   </script>

native修饰符

可以在组件的根元素 上直接监听原生事件

<Add @click.native="save1" />