在你开始之前…
我们可以在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中使用事件和发射器的另一个有趣的方面:您现在可以在一个组件中创建事件，并在另一个组件中监听它并对它作出反应。
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是vue.js中使用事件发射器修改组件数据的方法的详细内容。