天天看點

vue父子元件傳值的方法

父元件中添加要給子元件的資料

<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);

}