使用v-model 双向绑定父子组件
一般子组件中有input 可以在父组件使用v-model来双向绑定数据,避免父子传值,过于麻烦
步骤:
1.1子组件中使用 input
<div class="search-input">
<el-dropdown trigger="click" @command="handleCommand">
<el-input
:placeholder="placeText"
@input="handleInput"
clearable
:class="{ noBorder: isBorder, hasBorder: !isBorder }"
@focus="isBorder = false"
@blur="isBorder = true"
@keyup.enter.native="handleEnter"
:value="inputText"
>
<svg-icon
slot="prefix"
class="icon-search"
icon-class="icon-search"
></svg-icon>
</el-input>
<el-dropdown-menu
slot="dropdown"
style="width: 300px"
>
<p style="font-size: 12px; margin-left: 15px; color: #aaa">
{{ $t('recent_search') }}
</p>
<el-dropdown-item
icon="el-icon-plus"
v-for="item in historyList"
:key="item._id"
:command="item.keyword"
>{{ item.keyword }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</div>
1.2 在input中绑定@input 事件 handleInput (名称自定义)
props: { inputText: String},
model: {
prop: 'inputText', //v-model 绑定的数据 需要改变子组件数据可以用 :value 来绑定 数据,不要使用v-model 在子组件中绑定数据
event: 'change' || 'blur' || 'keyup.enter.native', //可以使用或逻辑绑定多种input事件
},
1.3绑定事件传递给父组件
methods: {
getSearchHistory() {
getHistory(this.query).then((res) => {
this.historyList = res.data.data.payload
})
},
handleInput(event) {
this.$emit('change', event)
if (this.query.keyword === '') {
delete this.query.keyword
this.getSearchHistory()
} else {
this.getSearchHistory()
}
},
handleCommand(command){
this.$emit('searchCommand',command)
},
handleEnter(event) {
this.$emit('keyup.enter', event)
},
},
2.1 父组件接收
<SearchInput
:placeText="$t('search_placeholder1')"
:query="searchQuery"
@change="searchChange"
v-model="inputText" //使用双向绑定
@keyup.native.enter="searchUser" //传递过来的键盘事件
@searchCommand ="searchCommand"
></SearchInput>
这样就可以简化父子组件双向传值的麻烦
子组件中要绑定数值一定要用 :value 不然会报错