Vue.js中使用事件发射器修改组件数据的方法

PHP 2年前 (2020) admin
2,849 0 0

Vue.js中使用事件发射器修改组件数据的方法

本文将向您介绍如何使用事件发射器在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.js中使用事件发射器修改组件数据的方法

设置发射器

在此阶段,您希望将相同的行为传递给父组件,以便在单击时,父组件中嵌套的每个标题都将更改。

为此,您将创建一个发射器,它将在子组件中发出一个事件,父组件可以侦听该事件并作出响应(这与组件的事件侦听器逻辑相同)。

更改测试中的脚本部分。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="https://www.php.cn/vuejs/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

Vue.js中使用事件发射器修改组件数据的方法

可以看到,一旦事件在父组件中被响应,所有组件都会更新它们的报头,即使仅在一个子组件中指定了定义。

您可以在github上找到本教程的完整代码。

结论

您可以看到在Vue中使用事件和发射器的另一个有趣的方面:您现在可以在一个组件中创建事件,并在另一个组件中监听它并对它作出反应。

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程入门!!

以上就是Vue.js中使用事件发射器修改组件数据的方法的详细内容,更多请关注php中文网其它相关文章!

版权声明:admin 发表于 2020年9月30日 下午6:37。
转载请注明:Vue.js中使用事件发射器修改组件数据的方法 | 职涯宝

相关文章

暂无评论

暂无评论...
本站主题由 OneNav 一为主题强力驱动