ref
文檔地址：https://cn.vuejs.org/v2/api/#ref
預期類型：String
ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件。
關於 ref 注冊時間的重要說明：因為 ref 本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。
總結
代碼舉例
使用的School組件代碼和上一篇的一樣，就不再例舉
ref是vue中與原生html中id的替代者，相信大家對document.getElementById(id)一定比較熟悉，在vue中我們使用ref屬性實現
<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">點我輸出上方的DOM元素</button> <School ref="sch"/> </div> </template> <script> //引入School組件 import School from './components/School' export default { name:'App', components:{School}, data() { return { msg:'歡迎學習Vue！' } }, methods: { showDOM(){ console.log(this.$refs.title) //真實DOM元素 console.log(this.$refs.btn) //真實DOM元素 console.log(this.$refs.sch) //School組件的實例對象（vc） } }, } </script>
效果展示：
prop配置
單向數據流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。
其次，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。
這里有兩種常見的試圖變更一個 prop 的情形：
1.這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下，最好定義一個本地的 data property 並將這個 prop 用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
2.這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變變更這個對象或數組本身將會影響到父組件的狀態。
prop驗證
我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制台中警告你。這在開發一個會被別人用到的組件時尤其有幫助。
為了定制 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。例如：
Vue.component('my-component', {
props: {
// 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制台的警告。
注意那些 prop 會在一個組件實例創建之前進行驗證，所以實例的 property (如 data、computed 等) 在 default 或 validator 函數中是不可用的。
類型檢查
type 可以是下列原生構造函數中的一個：
1.String
2.Number
3.Boolean
4.Array
5.Object
6.Date
7.Function
8.Symbol
總結
代碼示例
<template> <div> <h1>{{msg}}</h1> <h2>學生姓名：{{name}}</h2> <h2>學生性別：{{sex}}</h2> <h2>學生年齡：{{myAge+1}}</h2> <button @click="updateAge">年齡加1</button> </div> </template> <script> export default { name:'Student', data() { console.log(this) return { msg:'我是一個西華大學的學生', myAge:this.age } }, methods: { updateAge(){ this.myAge++ } }, //簡單聲明接收 // props:['name','age','sex'] //接收的同時對數據進行類型限制 /* props:{ name:String, age:Number, sex:String } */ //接收的同時對數據：進行類型限制+默認值的指定+必要性的限制 props:{ name:{ type:String, //name的類型是字符串 required:true, //name是必要的 }, age:{ type:Number, default:18//默認值 }, sex:{ type:String, required:true } } } </script>
運行結果
