This article was last updated on March 12, 2019, and has not been updated for more than a year. If the article content or picture resources are invalid, please leave a message for feedback, and we will deal with it in a timely manner, thank you!
Is the vue component bound to a native event? Normally, if we want to bind an event to a component, we need to write it in this way. First, we need to trigger the event up through $emit, then listen to the event, and finally execute the method function, such as the following:
- <div id= "root" >
- <child @click= "handleClick" ></child>
- </div>
- <script>
- Vue.component('child',{
- template: '<div @click= "handleChildClick" >child</div>',
- methods: {
- handleChildClick: function () {
- this .$emit('click')
- }
- }
- })
- var vm = new Vue({
- el: '#root',
- methods: {
- handleClick: function () {
- Alert ('handleClick method ')
- }
- }
- })
- </script>
Then click the component to execute Alert ('handleClick method ') , but I haven't found that this is troublesome. Is there a simpler way to execute it? Yes, that's it. Add a . native modifier , as follows:
- <div id= "root" >
- <child @click. native = "handleClick" ></child>
- </div>
- <script>
- Vue.component('child',{
- template: '<div>child</div>'
- })
- var vm = new Vue({
- el: '#root',
- methods: {
- handleClick: function () {
- Alert ('handleClick method ')
- }
- }
- })
- </script>
This is a native click event, isn't it convenient?
