vue进阶学习

最新推荐文章于 2024-09-24 18:36:20 发布

Jyan_29

最新推荐文章于 2024-09-24 18:36:20 发布

阅读量791

点赞数

分类专栏： Web前端基础知识 vue

本文链接：https://blog.csdn.net/qq_33392141/article/details/91980013

版权

本文详细介绍了如何在 Vue 中实现原生事件绑定到组件，特别是使用 `native` 修饰符监听组件根元素的原生事件，以及在无法监听时如何利用 `$listeners` 替代方案。接着讨论了 `sync` 修饰符在父子组件间数据同步的应用，并展示了其等价的事件和属性绑定方式。最后，文章提供了一个链接，引导读者从零开始学习使用 Vue-Cli 3.0 搭建项目。

摘要由CSDN通过智能技术生成

此篇主要是个人对vue教程上第一遍未吃透的概念的理解

1 原生事件绑定到组件

在 Vue 中，对于原生元素（<div>、<button> 等）只能监听原生事件（也就是 HTMLElement.addEventListener() 实现的效果）；而对于 Vue 自定义组件，默认只能监听那个组件主动 $emit() 出来的自定义事件。
而使用native可以直接监听组件根元素的原生事件(强调：监听的是根元素的事件)；
所以如果组件的根元素不包含组件上原生事件(比如label标签就没有input事件)时就会出现静默失败，也就是官方引入$listeners属性(包含该组件上所有监听器)作为替换native绑定的第二套方案的原因：
1）在子组件模板上使用 v-on=“xxx” 将所有的事件监听器指向这个组件的某个特定的子元素
2）创建xxx的计算属性：

computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target