vue组件详解（二）——使用props传递数据

<div id="app4">
<my-component4 message="数据来自父组件"></my-component4>
</div>

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

渲染后的结果为：
<div id= ” app4”>
<div ＞来自父组件的数据＜／ div>
</div>

<div id="app5">
<input type="text" v-model="text">
<my-component5 :my-text="text"></my-component5>
</div>

Vue.component('my-component5',{
props: ['myText'],
template: '<div>{{myText}}</div>'
});var app5 = new Vue({
el: '#app5',
data: {
text: '动态传递父组件数据'
}
});

<div id="app6">
<input type="text" v-model="number">
<my-component6 :my-text="number"></my-component6>
</div>

Vue.component('my-component6',{
props: {
'myText':{
type: Number, //必须是数字类型的
required: true, //必须传值
default: 1 //如果未定义，默认值就是1
}
},
template: '<div>{{myText}}</div>'
});var app6 = new Vue({
el: '#app6',
data: {
number: 1
}
});

<div id="app7">
<my-component7 :init-count="1"></my-component7>
</div>

Vue.component('my-component7',{
props: ['initCount'],
template: '<div>{{count}}</div>',
data: function(){
return {
count: this.initCount
}
}
});
var app7 = new Vue({
el: '#app7'
});

<div id="app8">
<my-component8 :width="100"></my-component8>
</div>

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