（17）深入理解 Vue 组件——④ 给组件绑定原生事件 | Vue 基础理论实操父组件中给组件所绑定事件 `@clic

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

🔗本阶段对应的“官方文档”阅读

1 自定义事件

1.1 定义

父组件中给组件所绑定事件 @click="事件方法名" ，这个“绑定”事件叫做“自定义事件”。

❗️注意：“自定义事件”在 Vue 实例中不会执行相应的方法。如以下代码，并不会在点击时，出现 click 的弹窗！

<body>
  <div id="root">
    <child @click="handleClick"></child> <!-- 🚀handleClick 事件为“自定义事件” -->
  </div>
  <script>     
    Vue.component("child",{
      template: "<div>hello world</div>"  
    })
    var vm = new Vue({
      el: "#root",
      methods: {
        handleClick: function() {
          alert("click") 
        }
      }
    })
  </script>
</body>

1.2 如何触发“自定义事件”

子组件若要触发父组件绑定的事件，需要子组件对 template 的 dom 元素绑定一个原生事件。

当子组件的这个 dom 元素被点击时，methods 上调用 this.$emit("自定义事件名") 去触发自定义事件，同时父组件中去监听该自定义事件。

<body>
  <div id="root">
    <child @click="handleClick"></child> <!-- 3️⃣同时，父组件监听了这个“自定义事件”； -->
  </div>
  <script>     
    Vue.component("child",{
      template: '<div @click="handleChildClick">hello world</div>',
      // 1️⃣在子组件的“元素”上绑定一个点击事件；
      
      methods: {
        handleChildClick: function() {
          this.$emit("click") // 🚀2️⃣当点击时，触发自定义事件；      
        }
      }
    })
    var vm = new Vue({
      el: "#root",
      methods: {
        handleClick: function() { // 4️⃣我们在根实例的方法里去定义这个事件的方法。
          alert("click")
        }
      }
    })
  </script>
</body>

2 原生事件

原生事件的监听分两种情况：

2.1 子组件的原生事件

在子组件里对 template 的 dom 元素绑定原生事件，methods 上执行原生事件，然后触发父组件上的自定义事件。

Vue.component("child",{
  template: '<div @click="handleChildClick">前端一万小时</div>',
  methods: {
    handleChildClick: function() {
      alert("child click") // 触发原生事件       
    }
  }
})

2.2 父组件的原生事件—— `.native`

❓需求： 我们是否可以在页面模板上直接监听子组件的原生事件（即，不需要像上文 1.2 那样一层一层地触发和监听）？

💡解决： 在父组件上做事件监听 @click:native="事件方法名" ，监听的并不是自定义事件，是原生的点击事件。

<body>
  <div id="root">
    <child @click.native="handleClick"></child>
  </div>	
  <script>     
    Vue.component("child", {
      template: "<div>hello world</div>", 
    })
    var vm = new Vue({
      el: "#root",
      methods: {
        handleClick: function() {
          alert("child click") 
        }
      }
    })
  </script>
</body>

祝好，qdywxs ♥ you！

（17）深入理解 Vue 组件——④ 给组件绑定原生事件 | Vue 基础理论实操