vue组件中使用props传递数据的实例详解

 <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
 }
});

验证的type 类型可以是：

• String
• Number
• Boolean
• Object
• Array
• Function

type 也可以是一个自定义构造器，使用instanceof 检测。

当prop 验证失败时，在开发版本下会在控制台抛出一条警告。

二、单向数据流

Vue 2.x 与Vue l.x 比较大的一个改变就是， Vue2.x 通过props 传递数据是单向的了， 也就是父组件数据变化时会传递给子组件，但是反过来不行。

业务中会经常遇到两种需要改变prop 的情况，

2.1　一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。（Prop 作为初始值传入后，子组件想把它当作局部数据来用；）

这种情况可以在组件data 内再声明一个数据，引用父组件的prop ，示例代码如下： 

 <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'
});

组件中声明了数据count ， 它在组件初始化时会获取来自父组件的initCount ， 之后就与之无关了，只用维护c ount ， 这样就可以避免直接操作initCount 。

2.2　prop 作为需要被转变的原始值传入。（Prop 作为原始数据传入，由子组件处理成其它数据输出。）

这种情况用计算属性就可以了， 示例代码如下：

  <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'
});

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。