柳州市网站制作公司/优化快速排名公司

一、注册事件

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

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>