vue中的this.$emit方法

阅读目录

• 使用一：$emit
• 使用二：$emit update 和 .sync 修饰符

作用：用于子组件中触发父组件方法并传值

回到顶部

使用一：$emit

//子组件中
<template>
    <button @click="handleChildEvent">子组件中触发的事件</button>
</template>
  
<script>
export default {
    name:'ChildComponent',
    methods: {
        handleChildEvent() {
            // 触发自定义事件，并传递数据给父组件
            this.$emit('parent-event', 'Hello, World!');
        }
    }
}
</script>  

//父组件中
<child-component @parent-event="handleParentEvent"/>

<script>
export default {
    name: 'ParentComponent',
    // 注册子组件
    components: {
        ChildComponent
    },   
    methods: {
	    handleParentEvent(data) {
	      // 处理自定义事件的逻辑
	      console.log(data); // 输出：'Hello, World!'
	    }
   	}
}
</script>  

回到顶部

使用二：$emit update 和 .sync 修饰符

作用：.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

// 父组件
<template>
	//给子组件传值时使用.sync修饰符
  <child :page.sync="page"></child>
</template>
<script>
export default {
  data(){
    return {
      page:1
    }
  }
}
</script>

<script>
export default {
  props:["page"],
  computed(){
    // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变 
    currentPage {
      get(){
        return this.page
      },
      set(newVal){
	  	//$emit update 修改父组件中的数据
        this.$emit("update:page", newVal)
      }
    }
  }
}
</script>

相当于省略了父组件给子组件多传递一个修改数据的方法

// 带 .sync 修饰符
<children :selectNode.sync="node" />

// 无 .sync 修饰符，等同于
<children :selectNode="node" @update:selectNode="node=$event" />