$emit

最新推荐文章于 2023-08-04 07:45:00 发布

原创最新推荐文章于 2023-08-04 07:45:00 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

VUE 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在Vue.js中，当需要子组件向父组件传递数据时，如何利用自定义事件和`.sync`修饰符实现。Vue规定组件不能直接修改props的外部数据，而是通过调用`this.$emit`触发事件并传参，父组件通过监听事件并使用$event获取子组件传递的数据，进一步更新状态。`.sync`修饰符则简化了这一过程，实现了父子组件间的双向绑定。

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName)触发事件
使用 $event(eventName)接收事件返回值

Vue规则

组件不能修改props外部数据
this.$emit可以触发事件，并传参
$event可以获取$emit的参数

// Vue2
// 子组件定义界面并给父组件传递事件
<button @click="emit('name', data-100)"/>
props:['data'] // 接收父组件传过来的属性

//父组件导入
import xxx from '@/...'
//父组件注册
components:{xxx:xxx}
//父组件接收子组件传递过来的值
<xxx :name="$event" />  // $event是Vue内部封装的eventBus 可以接收emit传递过来的属性

<div id="example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>








// Vue3
// 子组件定义界面并给父组件传递事件
<button @click="$emit('name', 传递的数据)"/>
props: {      // 接收父组件传过来的属性
    addRow: { // 判断是哪个form
      type: String,
      required: true,
      default(){
          return ''
      }
  }

//父组件导入
import xxx from '@/...'
//父组件注册
components:{xxx:xxx}
//父组件接收子组件传递过来的值
// $event是Vue内部封装的eventBus 可以接收emit传递过来的属性 如果用作函数，则会作为第一个参数传过去
<xxx @name="fn" />  

function fn(传递的数据){
	console.log(传递的数据)
}

.sync

相当于给父子组件添加了双向绑定
原理：
子组件通过$emit给父组件传递属性
<button @click="emit('name', data-100)"/>

父组件通过$event接收属性，通过props向下传递数据

<xxx :name="$event" />//$event = data-100