How to add vue Custom components using Native events
Today, I would like to share with you how to add vue custom components to use native events related knowledge points, the content is detailed, logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.
How to add custom components to use native events
Custom component (Components) is one of the important knowledge blocks of vue. In use, many people will find a question: why does it not work when I bind click events in the component? Let's take a look at the reason.
Binding the native event vue directly in a custom component is "undesirable". It will assume that you have not defined the event, so there is no response.
What are the original events?
For example, click click, mouseover mouse move in, mouseout mouse move out, keyup keyboard press up, keydown keyboard press … And so on, a series of events provided by the authorities are all original events. So what do we do?
. $emit () passes var vm = new Vue ({el: "# app", data: {message: "Hello World"}, components: {Jsxj: {props: ['jsxj'], template: `{jsxj}})
`, methods: {pChange () {this.$emit ("click")}},}}, methods: {JsxjChange () {this.message= "Hi, Jsxj"}},})
The first way is to pass the event through $emit (). Such as the code: we set the template in the custom component Jsxj, and in the template
The native click event is triggered on the native element, the function pChange () is called, and the function passes the custom event click up with $emit (). The parent component Jsxj receives this event, so the click can be triggered normally.
. Native attribute var vm = new Vue ({el: "# app", data: {message: "Hello World"}, components: {Jsxj: {props: ['jsxj'], template: `
{{jsxj}}
`}}, methods: {JsxjChange () {this.message= "Hi, Jsxj"}},})
The second method is relatively simple.
The code is more or less the same, but instead of passing custom events from the child to the parent with $emit (), it's too troublesome to use the native attribute to help @ click.native= "JsxjChange" so that the component knows that this is the native event click and calls the appropriate function.
Vue uses native events
Element ui, the ui framework, is used in the project. Some components do not have encapsulated events, such as the click event. I feel that it does not work when I use it. Later, when I look at the official vue documentation, I find that some native events are not provided, and our custom components cannot use the click event directly. You need to write .native after the click event to take effect.
For example:
These are all the contents of the article "how to add vue Custom components to use Native events". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
