Vue 监听子组件事件的几种方法

1.在Vue实例模板上监听，并调用Vue实例的方法直接使用v-on绑定事件并调用即可。<body><div id="app"><button @click="vueSay(0)">组件0</button></div><script>new Vue({methods: {vueSay(num) {console.log('组件'

oneheart初心

6004人浏览 · 2020-07-22 00:23:52

oneheart初心 · 2020-07-22 00:23:52 发布

1.在Vue实例模板上监听，并调用Vue实例的方法

直接使用v-on绑定事件并调用即可。

<body>
  <div id="app">
    <button @click="vueSay(0)">组件0</button>
  </div>
  <script>
    new Vue({
      methods: {
        vueSay(num) {
          console.log('组件' + num + '：触发了在Vue实例中定义的方法')
        }
      }
    }).$mount("#app")
  </script>
</body>

效果如下：
在这里插入图片描述

2.在组件模板上监听，并调用组件的方法

在组件模板上通过使用this可调用在组件中定义的方法。

<body>
  <div id="app">
    <com1></com1>
  </div>
  <script>
    const com1 = {
      template: `<button @click="this.fun1">组件1</button>`,
      methods: {
        fun1(event) {
          console.log('组件1：触发了在组件1中定义的方法')
        }
      }
    }
    new Vue({
      components: {
        com1: com1
      }
    }).$mount("#app")
  </script>
</body>

在这里插入图片描述

3.在组件模板上监听，并调用Vue实例的方法

Vue内置了一个$emit方法，可用于父子组件通信。
$emit的第一个参数为自定义的事件名，第二个参数为抛出的值。

3.1 监听不传值

通过子组件（button）调用$emit并传入一个自定义的事件名。
然后就可以在组件上直接使用该自定义事件。
通过v-on在组件上将该自定义事件绑定到一个Vue实例中定义的方法。

<body>
  <div id="app">
    <com2 @fun2="vueSayNum">
    </com2>
  </div>
  <script>
    const com2 = {
      template: `<button @click="$emit('fun2')">组件2</button>`,
    }
    new Vue({
      methods: {
        vueSayNum() {
          console.log('组件2：触发了在Vue实例中定义的方法')
        }
      },
      components: {
        com2: com2
      }
    }).$mount("#app")
  </script>
</body>

效果如下：
在这里插入图片描述

3.2 监听传值

在子组件上直接使用v-on绑定组件的方法。
在组件的方法中使用this调用$emit并传值。
$emit的第一个参数为自定义的事件名，第二个参数为抛出的值。
调用$emit后可以在组件上直接使用这个自定义事件。
通过v-on指令在组件上将该事件绑定一个Vue中的方法。
在Vue中的方法上可以接收这个抛出的值。

<!-- 方法一 -->
<body>
  <div id="app">
    <com3 @fun3="vueSay">
    </com3>
  </div>
  <script>
    const com3 = {
      template: `<button @click="fun3">组件3</button>`,
      methods: {
        fun3() {
          this.$emit('fun3', 3)
        }
      },
    }
    new Vue({
      methods: {
        vueSay(num) {
          console.log('组件' + num + '：触发了在Vue实例中定义的方法')
        }
      },
      components: {
        com3: com3
      }
    }).$mount("#app")
  </script>
</body>

这里的$emit语句可以直接写到子组件绑定的事件中，也可以单独写到一个方法中。

<!-- 方法二 -->
<body>
  <div id="app">
    <com3 @fun3="vueSay">
    </com3>
  </div>
  <script>
    const com3 = {
      template: `<button @click="$emit('fun3', 3)">组件3</button>`
    }
    new Vue({
      methods: {
        vueSay(num) {
          console.log('组件' + num + '：触发了在Vue实例中定义的方法')
        }
      },
      components: {
        com3: com3
      }
    }).$mount("#app")
  </script>
</body>

效果如下：
在这里插入图片描述

4.在组件模板根元素上监听，并调用Vue实例的方法

使用事件修饰符.native监听组件根元素的原生事件。（不能在组件上直接使用click事件）

<body>
  <div id="app">
    <com-native @click.native="vueSay('native')"><!-- 这里的native用于显示组件的名称，是vueSay的参数 -->
    </com-native>
  </div>
  <script>
    const comNative = {
      template: `<button>组件native</button>`,
    }
    new Vue({
      methods: {
        vueSay(num) {
          console.log('组件' + num.toString() + '：触发了在Vue实例中定义的方法')
        }
      },
      components: {
        comNative: comNative
      }
    }).$mount("#app")
  </script>
</body>

效果如下：
在这里插入图片描述

5.完整代码

#app {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
}
button {
  background-color: rgb(0, 140, 255);
  height: 50px;
  border: none;
  border-radius: 10%;
  cursor: pointer;
  margin-right: 30px;
  color: #fff;
  font-size: 20px;
}

<div id="app">
   <!-- 组件0 ：在Vue实例模板上监听，并调用Vue实例的方法 -->
   <button @click="vueSay(0)">组件0</button>
   <!-- 组件1 ：在组件模板上监听，并调用组件的方法-->
   <com1>
   </com1>
   <!-- 组件2 ：在组件模板上监听，并调用Vue实例的方法（不传值） -->
   <com2 @fun2="vueSayNum">
   </com2>
   <!-- 组件3 ：在组件模板上监听，并调用Vue实例的方法（传值） -->
   <com3 @fun3="vueSay">
   </com3>
   <!-- 组件native ：在组件模板根元素上监听，并调用Vue实例的方法 -->
   <com-native @click.native="vueSay('native')">
   </com-native>
</div>

const com1 = {
 template: `<button @click="this.comSay">组件1</button>`,
 methods: {
   comSay: function (event) {
     console.log('组件1：触发了在组件1中定义的方法')
   }
 }
}
const com2 = {
 template: `<button @click="$emit('fun2')">组件2</button>`,
}
const com3 = {
 template: `<button @click="fun3">组件3</button>`,
 methods: {
   fun3() {
     this.$emit('fun3', 3)
   }
 },
}
const comNative = {
 template: `<button>组件native</button>`,
}
new Vue({
 methods: {
   vueSay(num) {
     console.log('组件' + num.toString() + '：触发了在Vue实例中定义的方法')
   },
   vueSayNum() {
     console.log('组件2：触发了在Vue实例中定义的方法')
   }
 },
 components: {
   com1: com1,
   com2: com2,
   com3: com3,
   comNative: comNative
 }
}).$mount("#app")

点击效果如下图：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^