Vue 父向子组件传递参数

Vue 向子组件传递参数
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

<div id="app">
  <blog-info
      v-for="info in infos"
    v-bind:info="info"
  ></blog-info>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.component('blog-info', {
  props: ['info'],
  template: `
    <div class="blog-post">
        <h3>{{ info.title }}</h3>
        <div v-html="info.content"></div>
    </div>
  `
})
new Vue({
  el: '#app',
  data: {
    infos: [
      { id: 1, title: 'My journey with Vue', content:'1..' },
      { id: 2, title: 'Blogging with Vue', content:'2..' },
      { id: 3, title: 'Why Vue is so fun', content:'3..' }
    ]
  }
})