SOURCE

console 命令行工具 X clear

                    
>
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>