Element-Plus framework Dialog v-model binding, error reporting
Official el-dialog pop-up box binding method
Look at the picture below: You can see that the v-model used in el-dialog reports an error directly
You can see that the official list of two binding methods, let's try model-value
When we use model-value for binding, there will be a warning in the console. Here we use modelValue for binding according to its meaning, and try to
report an error again. Translation: modelValue props failed to check, the expected value is a Boolean value, and the obtained value is popShow character string
The following is the vue3 component extracted from Dialog alone
When we try to force type conversion, the console output still needs to convert
modelValue="ishow"
warning as shown in the console above
The parent component introduces the file extracted from Dialog
Here, ref is used to define popShow as false, that is, hidden. Pass: popShow in the subcomponent, and the subcomponent displays and hides by receiving the popShow value
solution
As shown in the figure below, change to this binding method, the problem is solved, and the console does not warn that
modelValue needs to be bound
principle
modeValue binding is an ordinary string, and the binding mechanism in vue is to execute the bound value as a js expression.
For example, <img src="url"> is just an ordinary path, and the page parses src is also url, and the url bound to using: src is a dynamic js value