vue.js 父子组件通信-prop

prop 是父组件用来传递数据的一个自定义属性。

1.prop

实例

<div id="app">
	<child message="hello!"></child>
</div>

<script>
Vue.component('child',{
  props: ['message'],
  template: '<span>{{ message }}</span>'
})

new Vue({
  el: '#app'
})
</script>

实例解析

2.动态prop

实例1

实例2

<ol>
<todo-item v-for="item in sites" v-bind:todo="item" :key="item.id">
</todo-item>
</ol>
Vue.component('todo-item',{
  props: ['todo'],
  template: '<li>{{todo.text}}</li>'
})

<script>
import Vue from 'vue'
Vue.component('todo-item',{
  props: ['todo'],
  template: '<li>{{todo.text}}</li>'
})
export default {
  name: 'page4',
  data () {
    return {
     sites: [
       {id: 1,text: '召唤师峡谷'},
       {id: 2,text: '嚎哭深渊'},
       {id: 3,text: '屠夫之桥'},
       {id: 4,text: '水晶之痕'},
       {id: 5,text: '扭曲丛林'},
       {id: 6,text: '试炼之地'}
     ]
    }
  }
}
</script>