SOURCE

console 命令行工具 X clear

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

// 动态Props
Vue.component("my-component", {
  props: ["text","val"],
  template:"<span>{{ text }} {{ val }}</span>"
})

// 字面量传值 VS 动态传值
Vue.component("test1", {
  props: ["some"],
  template: "<span>{{ typeof some }}</span>"
})
Vue.component("test2", {
  props: ["some"],
  template: "<span>{{ typeof some }}</span>"
})

// 单项数据流,将父组件 prop 属性的初始值作为局部属性的初始值
Vue.component("comp", {
  props: ["someProp"],
  template: "<span>{{ a }} {{ newVal }}</span>",
  data () {
    return {
      a: this.someProp
    }
  },
  computed: {
    newVal: function () {
      return this.someProp.push('2')
    }
  }
})

new Vue({
  el: "#app",
  data: {
    todo: {text:"one",val:"1"},
    msg: ['1']
  }
})
<div id="app">
  <child message="hello"></child><br />
  <!-- 动态Props -->
  <input type="text" v-model="todo.text" />
  <my-component v-bind="todo"></my-component><br />
  <!-- 字面量传值 VS 动态传值 -->
  <test1 some="42"></test1>  <!-- 42为string类型 -->
  <test2 :some="42"></test2><br />  <!-- 42为number类型 -->
  <!-- 单项数据流 -->
  {{ msg }}
  <comp :some-prop="msg"></comp>
</div>
html,body{
  background-color:#333;
  color:#fff;
}