Question
Why we add a click event to a div and it works, but when we add a click event to a custom component and click on the area where the bigProductCard is located, it does not trigger the click method?

The reason
It’s simple, the div adds a click event to the native html tag, the browser listens to the user’s mouse click, and then through vue’s processing, the start click callback function;

For custom components, we know from the vue source code that v-on actually ties a this.$on(‘click’, func) event to the child component instance, which is a fake listener that the browser won’t help us handle because it’s essentially just a this.$on(‘click’) event tied to the child component instance; when the child $emit(‘click’) will call the func in this.$on(‘click’,func) when the subcomponent departs from this.$emit(‘click’) at some point;

That’s all;

Solution:
Find a div in the subcomponent’s template, add a @click event, which the browser will help us listen to, and then listen to the callback function when this.$emit(click) is called, so that this.$on(‘click’,func) of the placeholder vnode can be called;

Read More:

• The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect
• [Solved] Vue3.0 Error: The component has been registered but not used vue/no-unused-components, Close eslint
• [Solved] Vuex state Error: [vuex] do not mutate vuex store state outside mutation handlers.
• [Solved] component import error is declared in the statement of components
• [Solved] React Click the Event to Modify the State Value Error
• [Solved] vue.esm.js?efeb:591 [Vue warn]: Error in event handler for “click“: “TypeError: Cannot read property
• [Solved] Front end error: Unknown custom element
• Vue wran name Error: Unkown custom element [How to Solve]
• [Solved] Error:The above error occurred in one of your React components & A component suspended while respondi
• [Solved] VUE D:\project\vueProject\vue-02\src\components\hello.vue 5:5 error Parsing error: x-invalid-end-tag
• Vue solves the problem of repeated click navigation route error
• [Solved] Vue3 Configuration routing error: Catch all routes (“*“) must now be defined using a param with a custom regexp.
• [Vue warn]: Invalid prop: custom validator check failed for prop “index“
• [Solved] ant design pro vue Startup Error: ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/Num
• Bugly automatically upload script and report zip error: nothing to do! In xcode10
• [Vue warn]: Invalid prop: custom validator check failed for prop “navigationBarTextStyle“.
• The page console error [Vue warn]: Invalid prop: custom validator check failed for prop “status“
• [Solved] “npm WARN logfile could not be created: Error: EPERM: operation not permitted,…”
• Vue: How to Fix “not displaying the holder in IE9 and below”
• [Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.