此处监听父组件.native时候 子组件并没有增加点击事件 那么.native到底是什么意思呢

此处监听父组件.native时候 子组件并没有增加点击事件 那么.native到底是什么意思呢

http://img1.sycdn.imooc.com//climg/6003b49109a1afde09930620.jpg

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>给组件绑定原生事件</title>

    <script src="vue.js"></script>

</head>

<body>

    <div id="root">

        <!-- 监听的自定义事件 -->

        <child @click.native="handleClick"></child>

    </div>

    <script>

        Vue.component('child',{

            //监听的原生事件

            template:'<div @click="handleChildClick">Child</div>',

            // methods:{

            //     handleChildClick:function(){

            //         alert('child click')

            //         // this.$emit('click')//子组件想监听父组件用¥emit

            //     }

            // }

        })

        var vm=new Vue({

            el:'#root',

            methods:{

                handleClick:function(){

                    alert('click')

                }

            }

            

        })//返回结果 先是child click 后click

    </script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2021-01-17 13:50:03

同学你好,解答如下:

.native是指监听原生事件,如下代码的含义是父组件监听子组件原生的click(点击)事件。当子组件触发了点击事件后,父组件中handleClick方法就会执行:

http://img1.sycdn.imooc.com//climg/6003ce2f0928d49707350463.jpg

当点击子组件时,默认就是触发子组件原生的点击事件,所以子组件不需要做其他操作。另外,如果子组件不需要监听自己的事件,那么可以不写如下代码:

http://img1.sycdn.imooc.com//climg/6003cfe009aba41306520119.jpg

如果子组件需要在自身点击事件中做些事情,此时子组件需要监听自己的点击事件,如下:

http://img1.sycdn.imooc.com//climg/6003cf3109c1a95c07970592.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师