2. 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: `
    

        
{{ info.title }}
        

    
  `
})
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..' }
    ]
  }
})