console
//传递来自父级的动态数据,通过v-bind动态绑定props的值
Vue.component('my-component', {
props: ['message'],
template: '<div>{{ message}}</div>'
});
var app = new Vue({
el: '#app',
data: {
parentMessage: ''
}
})
//直接传递数字、布尔值、数组、对象且不使用v-bind,传递的仅是字符串
Vue.component('my-component1', {
props: ['message'],
template: '<div>message的长度为:{{ message.length }}</div>'
});
var app1 = new Vue({
el: '#app1'
})
// 两种改变props的情况之一:父组件传值,子组件引用、修改且不改变原值
Vue.component('my-component2', {
props: ['initCount'],
template: '<div>内部随意操作的count: {{ count }}</div>',
data: function() {
return {
count: this.initCount
}
}
});
var app2 = new Vue({
el: '#app2'
})
//两种改变props的情况之二:父组件传值,子组件直接使用原值(不改变原值)
Vue.component('my-component3', {
props: ['width'],
template: '<div :style="style">组件内容</div>',
computed: {
style: function() {
return {
width: this.width + 'px'
}
}
}
});
var app3 = new Vue({
el: '#app3'
})
<!-- 传递来自父级的动态数据,通过v-bind动态绑定props的值 -->
<div id="app">
<input type="text" v-model="parentMessage" />
<my-component :message="parentMessage"></my-component>
</div>
<hr />
<!-- 直接传递数字、布尔值、数组、对象且不使用v-bind,传递的仅是字符串 -->
<div id="app1">
<my-component1 message="[1, 2, 3]"></my-component1>
<my-component1 :message="[1, 2, 3]"></my-component1>
</div>
<hr />
<!-- 两种改变props的情况之一:父组件传值,子组件引用、修改(不改变原值) -->
<div id="app2">
<my-component2 :init-count="1"></my-component2>
</div>
<!-- 两种改变props的情况之二:父组件传值,子组件直接使用原值(不改变原值) -->
<div id="app3">
<my-component3 :width="200"></my-component3>
</div>
<hr />
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>