父組件給子組件傳值 // 父<div id = "app"> <my-content></my-content></div> // 子<template id="content"> <div class="content"> 這裡是內容區域 {{ msg }} </div></template> 在 ...
父組件給子組件傳值
// 父
<div id = "app">
<my-content></my-content>
</div>
// 子
<template id="content">
<div class="content">
這裡是內容區域--- {{ msg }}
</div>
</template>
在父組件調用子組件的地方，給它添加一個自定義的屬性 test, 屬性的值為 測試
> <my-content test = "測試" ></my-content>
在子組件定義的地方，添加一個選項 props， 值為數組， 數組元素為之前自定義的屬性 test
const MyContent = {
props: ['test'],
template: "#content"
}
接下來就可以在子組件中通過 {{ test }}或者其他的vue的用法使用這個值
>1.父組件在調用子組件的地方，添加一個自定義的屬性，屬性的值為你需要傳遞給子組件的值，
>2. 在子組件定義的地方，添加了一個props選項，它的值是一個由自定義屬性組合而成的數組，
>3. 在子組件的模板中，通過自定的屬性名就可以獲取到父組件傳遞過來的值
拓展：假如父組件給子組件傳的值是子組件不想要的呢？ --- 子組件需要驗證數據的類型，這一步是項目中常用的
props: {
test: String
}
拓展： 如果你需要的傳遞的值是一個變數，需要使用到綁定屬性
<my-content :test = "msg" ></my-content>
>1.父組件在調用子組件的地方，添加一個自定義的屬性，屬性的值為你需要傳遞給子組件的值，如果需要傳遞的值是變數，那麼需要使用到綁定屬性
> 2.在子組件定義的地方，添加了一個props選項，它的值是一個由自定義屬性組合而成的數組或者是一個對象，如果需要數據類型的校驗，則使用對象，否則可以使用數組，
> 3.在子組件的模板中，通過自定的屬性名就可以獲取到父組件傳遞過來的值
子組件給父組件傳值
水往地處流，如果嚮往高處流，就需要付出代價
> 子組件中，通過某一個事件，執行 this.$emit('**自定義的事件**', '需要傳遞的值')，
sendData () {
console.log('給父組件傳值')
this.$emit('my-event-test', '11223344')
}
> 在父組件調用子組件的地方，給它 綁定了 子組件中 **自定義的事件**，事件的實現由父組件實現，註意綁定事件中不要添加（），
<my-content @my-event-test = "getData"></my-content>
> 在父組件中實現時添加 參數，參數就是傳遞過來的值
getData (val) {
console.log(val) }
子組件中，通過某一個事件，執行 this.$emit('**自定義的事件**', '需要傳遞的值')，在父組件調用子組件的地方，給它 綁定了 子組件中 **自定義的事件**，事件的實現由父組件實現，註意綁定事件中不要添加（），在父組件中實現時添加 參數，參數就是傳遞過來的值
