当我们抽离出来一个 input 搜索栏目的时候 需要在父组件双向绑定数据 .那我们该如何办哪?3.0vue有这个办法可以帮我实现
1、父组件
Father.vue
<Input @send="getChildren" v-model:keyword="keyword"></Input >
data() {
return {
keyword:''
}
},
2、子组件
Input.vue
<input type="text"
:value="keyword"
placeholder="请输入内容"
@input="$emit('update:keyword',$event.target.value)" //该方法可以同步实现父子组件的数据变化
@keyup.enter="change" />
props: {
//接收数据属性
keyword:{
type:String,
default:'',
request:true
}
},
methods:{
change(){
console.log(this.keyword)//获得修改后的数据 可以在次定义事件函数 发送请求
}
}