Listening event from child components
文章目录

VueJS - Listening event from child components

设计一个 Post 列表, 每个 Post 前面有一个 按钮, 点击按钮可以增加字号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 
  大致流程:
  Vue 绑定了外部父组件 #blog-posts-events-demo, 给了一个 data: postFontSize = 1
  这个 postFontSize 的值会同步到 style 之上
  给子组件绑定一个事件, 这个事件会修改 postFontSize
  子组件里面调用这个自定义事件
 -->

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <!-- 这里将 post 传给了 blog-post 的 attr.post -->
    <!-- 这里还给 post 绑定了一个自定义事件, 事件名称为 enlargeText -->
    <blog-post v-on:enlarge-text="postFontSize += 0.1" v-for="post in posts" v-bind:key="post.id" v-bind:post="post">
    </blog-post>
  </div>
</div>

<script>
  Vue.component('blog-post', {
    props: ['post'],
    // 我们给这里的 button 调用自定义事件, 使用  $emit 方法 就可以
    template: `
      <div class="blog-post">
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>`
  })

  new Vue({
    el: '#blog-posts-events-demo',
    data: {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' },
      ],
      postFontSize: 1
    }
  })



</script>

给子组件注册自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- 这里绑定了一个新事件 enlarge-text, 并且会修改 postFontSize 的值  -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v-on:enlarge-text="postFontSize += 0.1" 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v-for="post in posts" 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v-bind:key="post.id" 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v-bind:post="post"
&nbsp;&nbsp;&nbsp;&nbsp;>
    </blog-post>
  </div>
</div>

注意: 大写字母可能会被转换, 注册事件的事件名不建议用大写字母

子组件里面调用自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  Vue.component('blog-post', {
    props: ['post'],
    // 我们给这里的 button 调用自定义事件, 使用  $emit 方法 就可以
    template: `
      <div class="blog-post">

      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>


      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>`
  })

因为之前绑定了事件, 这里我们调用事件就可以.

调用事件的方法是通过调用内建的 $emit 方法 并传入事件名称来触发一个事件

这样就修改了父组件里面的 postFontSize 的值, 并且父组件已经将这个值绑定到 View 之上, 所以就会立刻更新 View