Vue v-bind: 接收一个单独的对象

<script src="https://unpkg.com/vue"></script>

<div id="blog-post-demo" class="demo">
  <div :style="{ fontSize: postFontSize+'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"    // v-bind:title="post.title"
      v-on:enlarge-text="onEnlargeText">
      
     </blog-post>
  </div>
</div>

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

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [],
    postFontSize: 1
  },
  created: function () {
    // Alias the component instance as `vm`, so that we  
    // can access it inside the promise function
    var vm = this
    // Fetch our array of posts from an API
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(function (response) {
        return response.json()
      })
      .then(function (data) {
        vm.posts = data
      })
  },
  methods: {
    onEnlargeText: function (enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
	}
})