Vue中$emit的使用

最新推荐文章于 2023-07-12 11:40:41 发布

木南之

最新推荐文章于 2023-07-12 11:40:41 发布

阅读量318

点赞数

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/y_l33/article/details/128650647

版权

文章展示了在Vue.js中如何使用$emit触发自定义事件，以及父组件如何通过v-on监听并接收子组件传递的参数，实现父子组件之间的数据交互。例子中，子组件通过点击事件向父组件发送当前选中的文章索引，父组件更新其状态。

摘要由CSDN通过智能技术生成

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

// 父组件
<template>
  <div class="section">
    <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{currentIndex}}</p>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'comArticle',
  components: { comArticle },
  data() {
    return {
      currentIndex: -1,
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx
    }
  }
}
</script>

//子组件
<template>
  <div>
    <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  props: ['articles'],
  methods: {
    emitIndex(index) {
      this.$emit('onEmitIndex', index) // 触发父组件的方法，并传递参数index
    }
  }
}
</script>