父元件中添加要給子元件的資料
<aboutch :msg-father="text" trans-father="略略略" @sendiptVal='showChildMsg'></aboutch>
text為父元件中data中的動态資料,msg-father與trans-father為傳輸的資料名
子元件中引用需要的父元件資料 props: ['msgFather', 'transFather'], 使用方法與調用data中的資料一樣 {{msgFather}}
事件:
子元件發送事件
<el-input v-model="inputValue" placeholder="請輸入内容" @keyup.enter.native="enterText"></el-input>
enterText () {
this.$emit('sendiptVal', this.inputValue)
// 子元件發射自定義事件sendiptVal 并攜帶要傳遞給父元件的值,
// 如果要傳遞給父元件很多值,這些值要作為參數依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather);
}
父元件中接收
<aboutch :msg-father="text" trans-father="略略略" @sendiptVal='showChildMsg'></aboutch>
showChildMsg (childText) {
this.childText = childText
console.log(this.childText);
}