three different messages need to be displayed in the subcomponents
<div v-if="one"><span></span></div>
<div v-if="two"><span></span></div>
<div v-if="three"><span></span></div>defined in subcomponents
props: {
one: {
type: Boolean,
default: false
},
two:{
type: Boolean,
default: false
},
three:{
type: Boolean,
default: true
}
} the parent component selects which piece of data to display when it needs to be opened, so there is no problem with using the above operation
but after clicking on the click event defined in the following span in the child component, switching between these three pieces of data will report an error, although it does not affect the use of
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop"s value. Prop being mutated: "one"
found in
can I define a function pass if I can"t have a single item?
typeshow{
validator: function (value) {
if(value==="yi"){
this.oneshow();
}
else if(value==="er"){
this.twoshow();
}
}
}
}I wonder if this will work. How to use it in the parent component?