Vue:使用props传递数据

基本用法

<div id="app">
  <my-component message="来自父组件的数据"></my-component>
</div>

<script>
  Vue.component("my-component",{
  	props:['message'],
    template:'<div>{{message}}</div>'
  });
  
  var app = new Vue({el:'#app'});
</script>

由于HTML特性不区分大小写，当使用DOM模板时，驼峰明明（camelCase）的props名称需要转为短横分隔

<div id="app">
  <my-component warning-text="提示信息"></my-component>
</div>
<script>
  Vue.component('my-component',{
  	props:['warningText'],
    template:'<div>{{ warningText}}</div>'
  })
</script>

有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，页会传递给子组件。

<div id="app">
  <input type="text" v-model="parentMessage">
  <my-component :message="parentMessage"></my-component>
</div>

<script>
  Vue.component("my-component",{
	props:['message'],
    template:'<div>{{message}}</div>';
});

var app = new Vue)({
	el:'#app',
  data:{
  	parentMessage:''
  }
})
</script>

Vue组件的单项数据流

<div id="app">
  <my-component :width="100"></my-component>
</div>

<script>
	Vue.component("my-component",{
	props:['width'],
    template:'<div :style="style">组件内容</div>',
    computed:{
    	style:function(){
        	return {
            	width:this.width + 'px'
            }
        }
    }
});  

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

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  show:Function
}