元件props用法：

props: {
	    // 基礎型別檢測 （`null` 意思是任何型別都可以）
	    propA: Number,
	    // 多種型別
	    propB: [String, Number],
	    // 必傳且是字串
	    propC: {
	      type: String,
	      required: true
	    },
	    // 數字，有預設值
	    propD: {
	      type: Number,
	      default: 100
	    },
	    // 陣列／物件的預設值應當由一個工廠函式返回
	    propE: {
	      type: Object,
	      default: function () {
	        return { message: 'hello' }
	      }
	    },
	    // 自定義驗證函式
	    propF: {
	      validator: function (value) {
	        return value > 10
	      }
	    }
	  }
 

自定義事件學習：

父元件通過屬性將資料傳遞給子元件

子元件通過$on監聽子元件事件，通過$emit來觸發父元件的事件。

子元件程式碼：

<template>
	<div id="child">
		<p>子元件顯示父元件輸入：{{message}}</p>
		<button v-on:click="childMethod">子元件按鈕 add</button>
	</div>
</template>

<script>
	export default {
		props:{
			message: {
				type: String,
				default: "hello child"
			}
		},
		data() {
			return {
				count:0
			}
		},
		methods:{
			childMethod:function() {
				this.count += 1
				// 當父元件事件觸發之後，子元件通知父元件觸發某一個事件。
				this.$emit("fatherEmit")
			}
		},
		components:{

		}
	}
</script>

<style>
</style>
 

父元件程式碼：

<template>
	<div id="father">
		<p>父元件的計數器{{fatherCount}}</p>
		父元件的輸入：<input v-model="message">
		<!--父元件通過屬性繫結給子元件傳值-->
		<child v-bind:message = "message" v-on:fatherEmit = "fatherAdd"></child>
	</div>
</template>

<script>
	import Child from "../comment/Child"
	export default{
		data() {
			return {
				fatherCount:0,
				message:"hello"
			}
		},
		methods:{
			fatherAdd:function() {
				this.fatherCount += 1;
			}
		},
		components:{
			Child:Child
		}
	}
</script>

<style>
</style>