黄子涵

监听子组件事件

在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

它可以在模板中用来控制所有博文的字号：

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

现在我们在每篇博文正文之前添加一个按钮来放大字号：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

问题是这个按钮不会做任何事：

<button>
  Enlarge text
</button>

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听子组件事件</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="blog-post-demo">
    <div :style="{ fontSize: postFontSize + 'em' }"></div>
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
      <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        放大字号
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: '黄子涵', content: '黄子涵是帅哥！' },
          { id: 2, title: '黄春钦', content: '黄春钦是黄子涵的弟弟！' },
          { id: 3, title: '陈兰英', content: '陈兰英是黄子涵的妈妈！' }
        ],
        postFontSize: 1
      }
    })
  </script>
</body>

</html>

image

当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：>并传入事件名称来触发一个事件：

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

有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听子组件事件</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="hzh">
    <div :style="{ fontSize: postFontSize + 'em' }">
      <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += 0.1" v-on:decrease-text="postFontSize -= 0.1">
      </blog-post>
    </div>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        放大字号
      </button>
      <button v-on:click="$emit('decrease-text')">
        减小字号
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })

    new Vue({
      el: '#hzh',
      data: {
        posts: [
          { id: 1, title: '黄子涵', content: '黄子涵是帅哥！'},
          { id: 2, title: '黄春钦', content: '黄春钦是黄子涵的弟弟！'},
          { id: 3, title: '陈兰英', content: '陈兰英是黄子涵的妈妈！'}
        ],
        postFontSize: 1
      }
    })
  </script>
</body>

image

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

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

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听子组件事件</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="hzh">
    <div :style="{ fontSize: postFontSize + 'em' }">
      <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += $event" v-on:decrease-text="postFontSize -= $event">
      </blog-post>
    </div>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text', 0.1)">
        放大字号
      </button>
      <button v-on:click="$emit('decrease-text', 0.1)">
        减小字号
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })

    new Vue({
      el: '#hzh',
      data: {
        posts: [
          { id: 1, title: '黄子涵', content: '黄子涵是帅哥！'},
          { id: 2, title: '黄春钦', content: '黄春钦是黄子涵的弟弟！'},
          { id: 3, title: '陈兰英', content: '陈兰英是黄子涵的妈妈！'}
        ],
        postFontSize: 1
      }
    })
  </script>
</body>

image

或者，如果这个事件处理函数是一个方法：

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}
在组件上使用 v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">

等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当用在组件上时，v-model 则会这样：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

  • 将其 value attribute 绑定到一个名叫 value 的 prop 上
  • 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>
posted @ 2022-06-04 11:37  黄子涵  阅读(123)  评论(0)  编辑  收藏  举报