Vue 事件注册（vue-cli）

子组件向父组件传值

component-->A.vue

<template>
  <div class="a">
    <h2>A.vue</h2>
    <button @click="changeTitle">change App.vue's title</button>
  </div>
</template>
<script>
export default {
  methods: {
    changeTitle() {
      //第一个参数就是注册是事件名称，名字随便起，第二参数是要传的值
      this.$emit("changeAppTitle", "Goodbye Vue");
    }
  }
};
</script>

App.vue

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <!-- 事件要写在嵌套的组件中 -->
    <A @changeAppTitle="changeTitle" />
  </div>
</template>

<script>
import A from "./components/A";

export default {
  name: "app",
  components: {
    A
  },
  data() {
    return {
      title: "Hello Vue"
    };
  },
  methods: {
    changeTitle(name) {
      this.title = name;
    }
  }
};
</script>

效果:

事件注册.gif