一、注册事件

如果子组件想要修改父组件的内容，不能在子组件内进行操作，必须在父组件内进行操作，在子组件内注册一个事件，然后在父组件进行调用

Header.vue，在div这给容器中绑定一个点击事件，然后这个方法里使用$emit，注册一个事件，第一参数是事件名称，第二个参数是事件的值，以此类推。注册这个事件后，需要有一个地方触发事件，就是在App.vue里触发

<template>
  <div @click="changeTitle" class="Header">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    changeTitle() {
      //注册一个事件，参数1：事件名称  参数2....: 值，如果有更多的参数，继续往后写，
      //注册这个事件后，就要有一个地方触发这个事件
      this.$emit("titleChange", "我是emit通过到app.vue中修改了title值");
    },
  },
};
</script>

<style scoped>
.Header {
  background: lightgreen;
  padding: 10px;
}
h1 {
  color: #222;
  text-align: center;
}
</style>

App.vue，在<Header 这个组件里，触发这个事件，事件名称需要与注册的事件名称保持一致，然后等于一个方法，在methods中写这个方法，这个方法的入参就是注册事件时，传的那个入参。这样就可以修改父组件的n内容。

<template>
  <!-- 包括html -->
  <div id="app">
    <!-- 注册了一个事件后，在这触发这个事件，名称要和触发的事件名称一样 -->
    <Header @titleChange="updateTitle" :title="title" />
    <User v-bind:usersname="users" />
    <Footer :title="title" />
  </div>
</template>

<script>
// js部分，逻辑部分
//import HelloWorld from "./components/HelloWorld.vue";
//1、引入组件
import User from "./components/Users.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

export default {
  name: "App",
  data() {
    return {
      users: [
        { usename: "test1", wechat: "1234567", show: false },
        { usename: "test2", wechat: "1234567", show: false },
        { usename: "test3", wechat: "1234567", show: false },
        { usename: "test4", wechat: "1234567", show: false },
      ],
      title: "我是tester",
    };
  },
  components: {
    User,
    Header,
    Footer,
  },
  methods: {
    //注册事件会传递，过来一个值，作为入参
    updateTitle(updatedTitle) {
      console.log(updatedTitle);
      this.title = updatedTitle;
    },
  },
};
</script>

<style scoped>
/* css部分 */
</style>

Vue-注册事件_elementui

Vue-注册事件_elementui_02