vue3 in element component emit pass event error
Report error:
Vue warn]: Extraneous non-emits event listeners (cancel, confirm, modelClose) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
Sub-component throwing events
emits: ['cancel', 'confirm', 'modelClose'],
setup (props, context) {
const { showDialog } = toRefs(props)
const show = computed(() => {
return showDialog.value
})
const cancel = () => {
context.emit('cancel')
}
const confirm = () => {
context.emit('confirm')
}
const modelClose = () => {
context.emit('modelClose')
}
return {
show, cancel, confirm, modelClose
}
Parent component receives events
`<user-info :showDialog="showDialog" @cancel="showDialog=false" @confirm="showDialog=false" @modelClose="showDialog=false"></user-info>
Read More:
- Vue modifies the value passed by props error: Avoid mutating a prop directly since the value will be overwritten whenever the par
- Vant Applet: The Usage of Vant-dialog in Before-close
- The addition, deletion and modification of DOM in JS Foundation
- How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …
- React error boundary (What You Should Know & How to Solve)
- uniapp Use render Function Error: [Vue warn]: Error in beforeCreate hook: “TypeError: Cannot read property ‘_i‘ of
- Anti card limited Drag Based on react draggable drag
- How to Solve Props value transfer International Language error
- Vue3.X Attribute Inheritance error [How to Solve]
- Use of $watch in Vue (solve rangeerror: maximum call stack size exceeded)
- Vue2.0: How to Use vue3 api to encapsulate Axios
- [Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.
- [Solved] error ‘xxx‘ is never reassigned. Use ‘const‘ instead prefer-const
- Vue Error: component has been registered but not used [Two Methods to Solve]
- Android realizes the fade in and fade out of animation effect
- [Solved] Error Rule can only have one resource source (provided resource and test + include + exclude)
- [Solved] Error Rule can only have one resource source (provided resource and test + include + exclude)
- Vue displays 404 and 500 interfaces according to HTTP response status
- [Solved] vue-roter 4 Error: Error: Invalid route component/Uncaught (in promise) Error: Invalid route component
- Error:Request failed with status code 401 [How to Solve]