自定义组件绑定原生事件和自定义事件

在自定义组件的根元素上监听一个原生事件在和html原生标签上监听一个原生事件是有区别的

如在App.vue中:

<!-- 给自定义组件添加点击事件 print -->
<Article
  v-for="article in articleList"
  :key="article.title"
  :article="article"
  @click="print(article)"
></Article>

在Article.vue中:

<div class="article-title" @click="printTitle">{{ article && article.title }}</div>

点击文章列表的标题部分可以发现只有子组件的事件被执行了

如果要让父组件的方法也执行则需要用到修饰符

要让父组件的print执行,可以添加.native

<Article
  v-for="article in articleList"
  :key="article.title"
  :article="article"
  @click.native="print(article)"

></Article>

自定义事件

我们不能直接在子组件中直接修改父组件中传来的prop数据,所以可以通过自定义事件来完成

1. 给子组件Article.vue绑定自定义事件:
   用v-on:upVote="handLikes"给Article.vue绑定自定义事件:

<!-- 自定义事件 upVote，调用该事件时会执行 handleLikes 方法 -->
<article
  v-for="article in articleList"
  :key="article.title"
  :article="article"
  v-on:upVote="handleLikes"
></article>

2. 在Article.vue中调用自定义事件"upVote" :

<!-- 在 template 中直接调用自定义事件 upVote -->
<button @click="$emit('upVote')">点赞</button>

当方法需要参数时:

<button @click="childEvent">点赞</button>

methods: {
  childEvent: function() {
    // 调用自定义事件 upVote，这里的第二个参数最后会传到父组件中的 handleLikes 方法里
    this.$emit('upVote', this.article);
    // do other things
  }
}

$emit的第一个参数是自定义事件的名称后面的参数会成为自定义事件对应的方法的参数

总结,自定义事件可以:

1. 在子组件中调用父组件的方法
2. 把子组件的数据通过自定义事件参数的形式传给父组件

双向绑定

父组件App.vue中用修饰符.sync完成count的双向绑定:

<MyCount class="count" :count.sync="count"></MyCount>

// 在 `methods` 对象中定义方法
data: function() {
  return {
    count: 0
  }
}

子组件MyCount.vue中用update:count的模式触发事件,把count+1赋给count:

<div class="my-count">
  <button @click="$emit('update:count', count+1)">加一</button>
  {{ count }}
</div>

案例来自于优课达