元件之所以很强大是他还有个资料传递功能，让各个元件互相沟通，今天就要来研究他到底要怎麽传资料!

props引用外部资料

在元件上用v-bind将props的资料传递进来。

Day08有提及关於命名的方式，props用法也一样，HTML模板呼叫时要改用连字号写法，parentMsg在模板中转换为parent-msg

在没有v-bind绑定的时候，template中的{{ parentMsg }}就只会显示「msg」而已，以纯文字的形式呈现(即便里面是数字也是string)

<my-component parent-msg="msg"></my-component>

props设定

指定资料格式

属性有以下(写在type里面时字首大写)

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

props:{
    'props-num':{
        type: Number,
    }
},

也可以指定多种格式

props:{
    'item':{
        type: [Number,String]
    }
},

设定预设值

加上default属性就可以设定预设值，可以是阵列、物件或是字串。

props:{
    'item':{
        type: [Number,String],
				default:'Hello'
    }
},

自订验证规则

若以上验证都不符合需求，可以自己创一个validator来验证。

props:{
    'item':{
        type: Number,
				validator: value => value > 0
    }
},

props物件

这边将程序分区块放在一起来理解。

实做之後发现当input内的质改变时，外层物件也被更改了，元件之间相互污染，为了避免这样的问题应该先将物件属性弄成原始型别後再传资料出去，类似建立副本的概念，这样就不会污染其它元件了。

<my-component 
	v-for="student in students" 
	:name="student.name" 
	:age="student.age" 
	:gender="student.gender">
</my-component>

//简化
<my-component 
	v-for="student in students" 
	:="student">
</my-component>

app.component('my-component', {
    template: `
    <div class="info-card">
        <label>name:<input type="text" v-model="name"></label>
        <label>age:<input type="text" v-model="age"></label>
        <label>gender:<input type="text" v-model="gender"></label>
    </div>
    `,
    props: ['name', 'age', 'gender']
})

看到现在觉得非常混乱，所以做了一张图让两种写法做比较，使用原始型别方式才不会改道记忆体中的资料。

JavaScript 引擎会将原始型别强制转型为 对应的物件型别 : 举例来说，var a = 1 中，你可以改变变数 a 的内容，但你没有任何手段可以把储存 1 这个值的记忆体位置写入其他内容。更多详细的内容将在之後介绍 JavaScript传值还是传址时讨论。—-JavaScript - 原始型别概述

双向绑定/单向资料流

就元件最佳的方式应该是不会污染父层的单向资料流，所以应该在元件里面也做一个专属於仔元件的data。

app.component('my-component', {
	  props: ['name', 'age', 'gender'],
	  data() {
	      return {
	          componentName: this.name,
	          componentAge: this.age,
	          componentGem: this.gender
	      }
	  },
	  template: `
	  <div class="info-card">
	      <label>name:<input type="text" v-model="componentName"></label>
	      <label>age:<input type="text" v-model="componentAge"></label>
	      <label>gender:<input type="text" v-model="componentGem"></label>
	  </div>
	  `
})