父組件給子組件傳值
// 父
<div id = "app">
<my-content></my-content>
</div>
// 子
<template id="content">
<div >
這里是內容區域--- {{ 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('**自定義的事件**', '需要傳遞的值')，在父組件呼叫子組件的地方，給它 系結了 子組件中 **自定義的事件**，事件的實作由父組件實作，注意系結事件中不要添加（），在父組件中實作時添加 引數，引數就是傳遞過來的值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/3992.html
標籤：HTML5
下一篇：vue-router詳解