【vue】一个例子理解组件

一、接受一个单独的 post对象 prop：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

组件内部的实现：

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

 

二、如果想再添加一个加大字号的事件：

父界面：

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

 

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

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

 

三、如果想传递参数

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

  Enlarge text

</button>

 

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

<blog-post

  ...

  v-on:enlarge-text="postFontSize += $event"

>

</blog-post>

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

<blog-post

  ...

  v-on:enlarge-text="onEnlargeText"

></blog-post>

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

methods: {

  onEnlargeText: function (enlargeAmount) {

    this.postFontSize += enlargeAmount

  }

}