使用watch监听
父组件使用.sync进行数据的绑定 传值子组件时 把值赋值到data的变量中 然后监听该数据的变化 $emit抛出
父组件demo
<template>
<div>
<Son :model-value.sync="modelValue" :select-value.sync="selectValue" />
</div>
</template>
<script>
import Son from './son.vue'
export default {
name: 'Father',
components: {
Son
},
props: {
},
data() {
return {
modelValue: '789',
selectValue: '1'
}
}
}
</script>
<style lang="scss" scoped>
</style>
子组件
<template>
<div>
<div style="margin-top: 15px;width: 600px;">
<el-input v-model="sonInputValue" placeholder="请输入内容" class="input-with-select">
<el-select slot="prepend" v-model="sonSelectValue" placeholder="请选择" style="width: 100px;">
<el-option label="餐厅名" value="1" />
<el-option label="订单号" value="2" />
<el-option label="用户电话" value="3" />
</el-select>
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
</div>
</template>
<script>
export default {
name: 'Son',
// 父组件传递过来的值
props: {
modelValue: {
type: String,
default: ''
},
selectValue: {
type: String,
default: ''
}
},
data() {
return {
// 子组件绑定的值
sonInputValue: this.modelValue,
sonSelectValue: this.selectValue
}
},
watch: {
// 当子组件绑定的值发生变化时 抛给父组件
sonInputValue() {
this.$emit('update:modelValue', this.sonInputValue)
},
sonSelectValue() {
this.$emit('update:selectValue', this.sonInputValue)
}
}
}
</script>
<style lang="scss" scoped>
</style>
展示效果
使用绑定对象的方式打破单向数据流实现
父组件
<template>
<div>
<Son :model-value.sync="modelValue" />
</div>
</template>
<script>
import Son from './son.vue'
export default {
name: 'Father',
components: {
Son
},
props: {
},
data() {
return {
modelValue: {
keyword: '',
placeholder: '请输入你查询的关键字',
options: [
{ label: '视频', value: 'video' },
{ label: '文章', value: 'article' },
{ label: '用户', value: 'user' }
],
selectValue: 'video'
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
子组件
<template>
<div>
<div style="margin-top: 15px;width: 600px;">
<el-input v-model="modelValue.keyword" :placeholder="modelValue.placeholder" class="input-with-select">
<el-select slot="prepend" v-model="modelValue.selectValue" placeholder="请选择" style="width: 100px;">
<el-option
v-for="item in modelValue.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
</div>
</template>
<script>
export default {
name: 'Son',
// 父组件传递过来的值
props: {
modelValue: {
type: Object,
default: () => { },
require: true
}
},
data() {
return {
}
},
watch: {
}
}
</script>
<style lang="scss" scoped>
</style>
参考vue官方及各插件库的方案 使用计算属性来保证双向数据流
通过计算属性 修改父组件中的值 让父组件的值发生变化 在去改变子组件的值
父组件
<template>
<div>
<Son :model-value.sync="modelValue" />
</div>
</template>
<script>
import Son from './son.vue'
export default {
name: 'Father',
components: {
Son
},
props: {
},
data() {
return {
modelValue: {
keyword: '',
placeholder: '请输入你查询的关键字',
options: [
{ label: '视频', value: 'video' },
{ label: '文章', value: 'article' },
{ label: '用户', value: 'user' }
],
selectValue: 'video'
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
子组件
<template>
<div>
<div style="margin-top: 15px;width: 600px;">
<el-input v-model="model.keyword" :placeholder="model.placeholder" class="input-with-select">
<el-select slot="prepend" v-model="model.selectValue" placeholder="请选择" style="width: 100px;">
<el-option
v-for="item in model.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
</div>
</template>
<script>
export default {
name: 'Son',
// 父组件传递过来的值
props: {
modelValue: {
type: Object,
default: () => { },
require: true
}
},
data() {
return {
}
},
computed: {
model: {
get() {
const _this = this
return new Proxy(this.modelValue, {
set(obj, name, val) {
_this.$emit('update:modelValue', {
...obj,
[name]: val
})
return true
}
})
},
set(val) {
this.$emit('update:modelValue', val)
}
}
},
watch: {
}
}
</script>
<style lang="scss" scoped>
</style>
