The binding event within the vue component is not triggered
as follows. Click click invalid
parent component:
<script>
export default {
name: "self-search",
data (){
return {
selfDialog: {
isShow: false,
title: ""
},
params: {
}
}
},
watch: {
params (value){
this.$emit("changeValue", value);
}
},
methods: {
openDialog (){
//
debugger;
}
}
}
</script>
is incorrectly written; the parent component should be triggered through this.$emit ('parent component event name', 'parameter'), as follows;
child component:
<button type="button" class="option-btn blue-btn ml20" @click="openDialog"></button>
methods: {
openDialog (){
//
this.$emit('fatherFuc', '1111')
}
}
parent component:
<child @fatherFuc="sendParams"></child>
methods: {
sendParams(val){
console.log(val); // :1111
}
}
you pass the value of the child component to the parent component through $emit and trigger the parent component event handler to pass the value, which should be:
<template>
<div>
<button type="button" class="option-btn blue-btn ml20" @click="openDialog(args)"></button>
</div>
</template>
<script>
export default {
name: "self-search",
data (){
return {
selfDialog: {
isShow: false,
title: ''
},
params: {
}
}
},
methods: {
openDialog (args){
this.$emit('changeValue',args)
}
}
}
</script>
parent component:
<self-search @changeValue="dealArgs"></self-search>
the data processed by the parent component to the child component should be processed in the corresponding methods
methods: {
dealArgs(value) {
//value
}
}
you seem to have used some JSX. Vue does not support JSX
by default.
found two problems
1. The following @ changeValue should use the corresponding methods to call back
<self-search @changeValue="obj => { Object.assign(params, obj); }"></self-search>
2. The property, watch params of the watch object should not just listen for the addition and deletion of the properties of the variable, but cannot correspond to changes in the value.
should use @ input
watchs: {
params() {}
}
you can refer to this preview effect
Preview address
