本文将向您介绍如何使用事件发射器在vue.js中将数据及其状态从子组件传递到其父组件。这篇文章适合所有阶段的开发人员，包括初学者。
在你开始之前…
我们可以在Vue.js中使用道具将数据传递到的子组件一文中查看在Vue.js中将数据从父组件传递到子组件的方法。
在阅读本文之前，您应该具备以下几点：
node.js 10.x及以上版本已安装。您可以通过在终端/命令提示符下运行以下命令来验证是否执行此操作：
node -v
代码编辑器——推荐Visual Studio
Vue的最新版本，全球安装在您的机器上
在您的机器上安装了Vue CLI 3.0。要做到这一点，首先卸载旧的CLI版本:
npm uninstall -g vue-cli
然后，安装一个新的:
npm install -g @vue/cli
在这里下载一个Vue入门项目
解压下载的项目
导航到解压缩的文件，并运行以下命令，以保持所有的依赖关系的最新:
npm install
通过组件传递数据
为了将数据值从应用程序组件中的父组件(如app.vue)传递给子组件(如嵌套组件)，Vue.js为我们提供了一个名为props的平台。
可以将道具称为自定义属性，您可以在组件上注册，该组件允许您在父组件中定义数据，为其赋值，然后将值传递给一个道具属性，该属性可以在子组件中引用。
这篇文章将向你展示这个过程的反面。为了从子组件传递和更新父组件中的数据值，以便所有其他嵌套组件也将被更新，我们使用emit构造来处理事件发射和数据更新。
示例：
您将经历以下过程:从子组件发出事件，设置监听父组件以便从子组件传递数据，最后更新数据值。
如果您从一开始就关注这篇文章，那么您将下载并在vs代码中打开starter项目。这个项目是完成的，完整的代码到这篇文章。
将其作为启动项目的原因是，在引入反转过程之前，您可以尝试一下道具概念。
开始
在该文件夹中，您将找到两个子组件：test.vue和test2.vue，其父组件是app.vue文件。 我们将使用两个子组件的标题来说明此事件发出方法。 您的Test.vue文件应如下所示：
<template>
<div>
<h1>Vue Top 20 Artists</h1>
<ul>
<li v-for="(artist, x) in artists" :key="x">
<h3>{{artist.name}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test',
props: {
artists: {
type: Array
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
height: 40px;
width: 100%;
padding: 15px;
border: 1px solid saddlebrown;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: #42b983;
}
</style>要使标题从数据属性部分中的隐式定义中接收标题，请创建数据部分并添加定义，然后在模板中添加插值符号，如下所示：
<template>
<div>
<h1>{{header}}</h1>
<ul>
<li v-for="(artist, x) in artists" :key="x">
<h3>{{artist.name}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test',
props: {
artists: {
type: Array
}
},
data() {
return {
header: 'Vue Top Artists'
}
}
}
</script>如果您运行应用程序，您将得到与开始时完全相同的接口。下一步是在click上更改这个已定义的属性。
切换标题
要切换标题，您必须在单击时将事件侦听器添加到标题，并指定包含将在单击时发生的逻辑的函数。
<template>
<div>
<h1 v-on:click="callingFunction">{{header}}</h1>
<ul>
<li v-for="(artist, x) in artists" :key="x">
<h3>{{artist.name}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test',
props: {
artists: {
type: Array
}
},
data() {
return {
header: 'Vue Top Artists'
}
},
methods: {
callingFunction(){
this.header = "You clicked on header 1";
}
}
}
</script>现在，您的标题更改为调用函数内的字符串单击。
设置发射器
在此阶段，您希望将相同的行为传递给父组件，以便在单击时，父组件中嵌套的每个标题都将更改。
为此，您将创建一个发射器，它将在子组件中发出一个事件，父组件可以侦听该事件并作出响应(这与组件的事件侦听器逻辑相同)。
更改测试中的脚本部分。vue文件到下面的代码块:
<script>
export default {
name: 'Test',
props: {
artists: {
type: Array
},
header: {
type: String
}
},
data() {
return {
// header: 'Vue Top Artists'
}
},
methods: {
callingFunction(){
// this.header = "You clicked on header 1"
this.$emit('toggle', 'You clicked header 1');
}
}
}
</script>在此，将标题期望的数据类型定义为prop。 然后，在该方法中，有一个generate语句，告诉Vue在切换时发出事件（就像其他事件一样，例如click事件），并将字符串作为参数传递。 这就是设置一个将在另一个组件中侦听的事件的全部。
监听发出的事件
现在，创建事件后要做的下一件事是侦听并响应它。将此代码块复制到您的app.vue文件中:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Test v-bind:header="header" v-on:toggle="toggleHeader($event)" />
<Test v-bind:artists="artists" />
<test2 v-bind:header="header"/>
<test2 v-bind:artists="artists" />
</div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2'
export default {
name: 'app',
components: {
Test, Test2
},
data (){
return {
artists: [
{name: 'Davido', genre: 'afrobeats', country: 'Nigeria'},
{name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'},
{name: 'AKA', genre: 'hiphop', country: 'South-Africa'}
],
header: 'Vue Top Artists'
}
},
methods: {
toggleHeader(x){
this.header = x;
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>在模板部分，您可以看到第一个组件test上有两个vue指令。第一个是v-bind，它将initial header属性绑定到artists数组下的数据对象中的隐式定义；初始化时，将显示字符串vue top artists。
第二个指令是v-on，它用于监听事件；要监听的事件是toggle（记住，您已经在测试组件中定义了它），它的调用函数是toggleheader。此函数已创建，子组件中的字符串将通过$event参数传递到此处显示。
含义
这会将数据通过发射器传递到父组件，因此由于其他组件嵌套在父组件中，因此每个嵌套组件中的数据都会重新呈现和更新。进入test2.vue文件并将此代码块复制到其中：
<template>
<div>
<h1>{{header}}</h1>
<ul>
<li v-for="(artist, x) in artists" :key="x">
<h3>{{artist.name}} from {{artist.country}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test2',
props: {
artists: {
type: Array
},
header: {
type: String
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
height: 40px;
width: 100%;
padding: 15px;
border: 1px solid saddlebrown;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: #42b983;
}
</style>这里，数据插值被设置并指定为道具对象中的一个字符串。在你的开发服务器上运行应用程序:
npm run serve
可以看到，一旦事件在父组件中被响应，所有组件都会更新它们的报头，即使仅在一个子组件中指定了定义。
您可以在github上找到本教程的完整代码。
结论
您可以看到在Vue中使用事件和发射器的另一个有趣的方面:您现在可以在一个组件中创建事件，并在另一个组件中监听它并对它作出反应。
相关推荐：
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci Vue.js中使用事件发射器修改组件数据的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Mengapakah vue.js melaporkan ralat?
Apakah kegunaan slot vue.js?
Cara melompat dengan parameter dalam vue.js
Perbezaan antara perkhidmatan teragih dan mikro
Apakah maksud aktiviti status pengaktifan win11?
Apakah maksud perisikan data?
Kaedah Window.setInterval().
Bagaimana untuk menyemak sejarah muat turun di TikTok
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
