vue自定义组件添加使用原生事件

柔情只为你懂 2023-07-04 15:46 12阅读 0赞

自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。  
在自定义组件中直接绑定原生事件vue可是"不待见"的，它会认为你没有定义这个事件，所以没有任何反应。哪些是原生事件？例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列由官方提供的事件都是原生事件。那么咋办？

**1. $emit()传递**

<body>
        <div id="app">
            <Jsxj :jsxj="message" @click="JsxjChange"></Jsxj>
        </div>
    </body>
    <script>
        var vm = new Vue({ 
            el:"#app",
            data:{ 
                message:"Hello World"
            },
            components:{ 
                Jsxj:{ 
                    props:['jsxj'],
                    template:`<p @click="pChange">{ {jsxj}}</p>`,
                    methods: { 
                        pChange(){ 
                            this.$emit("click")
                        }
                    },
                }
            },
            methods: { 
                JsxjChange(){ 
                    this.message="Hi, Jsxj"
                }
            },
        })
    </script>

第一种方法是通过$emit()传递事件。如代码：我们在自定义组件Jsxj中设置模板，在模板中<p>原生元素上触发原生click事件，调用函数pChange()，函数用$emit()向上传递自定义事件click，父组件Jsxj接收到这个事件，于是便可以正常触发click。

**2. native属性**

<body>
        <div id="app">
            <Jsxj :jsxj="message" @click.native="JsxjChange"></Jsxj>
        </div>
    </body>
    <script>
        var vm = new Vue({ 
            el:"#app",
            data:{ 
                message:"Hello World"
            },
            components:{ 
                Jsxj:{ 
                    props:['jsxj'],
                    template:`<p>{ {jsxj}}</p>`  
                }
            },
            methods: { 
                JsxjChange(){ 
                    this.message="Hi, Jsxj"
                }
            },
        })
    </script>

第二种方法相对简单。代码大同小异，不过我们不再用$emit()从子向父传递自定义事件，太麻烦了，而是用native属性帮忙`@click.native="JsxjChange"`，这样组件就会知道这是原生事件click，调用相应的函数。