How to use event emitters to modify component data in Vue.js

This article will introduce you how to use event emitters to pass data and its state from child components to its parent component in vue.js. This article is suitable for developers of all stages, including beginners.

Before you start...

We can use props in Vue.js to pass data to child components See in the article In Vue Method in .js to pass data from parent component to child component.

Before reading this article, you should have the following points:

node.js 10.x and above has been installed. You can verify this by running the following command in Terminal/Command Prompt:

node -v

• Code Editor - Visual Studio recommended

• The latest version of Vue, installed globally on your machine

• Vue CLI 3.0 is installed on your machine. To do this, first uninstall the old CLI version:

npm uninstall -g vue-cli

Then, install a new one:

npm install -g @vue/cli

• Download one here

  Vue Getting Started Project

• Unzip the downloaded project

• Navigate to the unzipped file and run the following command to Keep all dependencies up to date:

npm install

Passing data through components

In order to pass data values ​​from the application Parent components in components (such as app.vue) are passed to child components (such as nested components), and Vue.js provides us with a platform called props.

Props can be called custom properties that you can register on a component that allows you to define data in the parent component, assign a value to it, and then pass the value to a prop property that can be Referenced in child components.

This article will show you the flip side of this process. In order to pass and update the data values ​​in the parent component from the child component so that all other nested components will also be updated, we use the emit construct to handle event emission and data updates.

Example:

#You will go through the following process: emitting events from child components, setting up listening parent components to pass from child components data, and finally update the data value.

If you have followed this article from the beginning, you will download and open the

starter project in vs code. This project is complete with complete code as of this article.

The reason for making this a starter project is so you can try out the prop concept before introducing the reversal process.

Start

In that folder you will find two sub-components:

test.vue and test2.vue, its parent component is the app.vue file. We will use the headers of the two child components to illustrate this event emitting method. Your Test.vue file should look like this:

<template>
  <div>
    <h1 id="Vue-nbsp-Top-nbsp-nbsp-Artists">Vue Top 20 Artists</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  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>

To have the headers receive headers from the implicit definition in the data properties section, create the data section and add the definition, then in Add interpolation symbols to the template as follows:

<template>
  <div>
    <h1 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  },
  data() {
    return {
     header: &#39;Vue Top Artists&#39;
    }
  }
}
</script>

If you run the application, you will get exactly the same interface as when you started. The next step is to change this defined property on

click.

Toggle Title

To toggle the title you must add an event listener to the title when clicked and specify that the containing A function for the logic that occurs when clicked.

<template>
  <div>
    <h1 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  },
  data() {
    return {
     header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    callingFunction(){
      this.header = "You clicked on header 1";
    }
  }
}
</script>

Now your title changes to the string inside the calling function on click.

Set up the emitter

At this stage you want to pass the same behavior to the parent component so that when clicked, each title nested in the parent component will change.

To do this, you will create an emitter that will emit an event in the child component that the parent component can listen to and respond to (this is the same logic as the component's event listener).

Change the script part in the test. vue file to the following code block:

<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    },
    header: {
      type: String
    }
  },
  data() {
    return {
      // header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    callingFunction(){
      // this.header = "You clicked on header 1"
      this.$emit(&#39;toggle&#39;, &#39;You clicked header 1&#39;);
    }
  }
}
</script>

Here, define the data type expected by the header as prop. Then, within that method, there is a generate statement that tells Vue to emit an event when it switches (just like other events, such as a click event) and passes the string as a parameter. That's all there is to setting up an event that will be listened to in another component.

Listen for emitted events

Now, the next thing to do after creating the event is to listen for and respond to it. Copy this code block into your app.vue file:

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <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 &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;}
      ],
      header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    toggleHeader(x){
      this.header = x;
    }
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, 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 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
      <h3 id="artist-name-nbsp-from-nbsp-artist-country">{{artist.name}} from {{artist.country}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  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视频教程精选

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of How to use event emitters to modify component data in Vue.js. For more information, please follow other related articles on the PHP Chinese website!