Vue 组件通信--Event深入--v-model深入--属性修饰符sync--$attrs和$listeners--$children和$parent--混入mixin--scope-slot

1.Event 深入

@click 单击事件可以绑定到标签上，但绑定到 组件上是没有反应的，需要添加.native,即 @click.native 来触发原生DOM 事件

App.vue 文件

<template>
  <div>
    <button @click="handler">原生事件button>
    <Event1 @click="handler2">Event1>
  div>
template>

<script>
import Event1 from "./components/Event1.vue";

export default {
  name: "App",
  components: {
    Event1,
  },
  methods: {
    handler() {
      console.log("原生的单击事件触发了");
    },
    handler2() {
      console.log("组件的单击事件触发了");
    },
  },
};
script>

<style>style>

Event1.vue 文件

<template>
  <div>
    <h1>我是h1 标签h1>
    <span>我是spanspan>
  div>
template>

<script>
export default {
  name: "Event1",
};
script>

<style scoped>
div {
  background-color: #ccc;
}
style>

可以看到 绑定到组件上并没有什么反应，这种绑定到组件上的事件，如果不加 .native 都是自定义事件
下面是加了.native 后

 <Event1 @click.native="handler2">Event1>

这种加了.native 实际上就是绑定到了