• 技术文章 >web前端 >Vue.js

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

    青灯夜游青灯夜游2020-09-30 17:56:13转载197

    本文将向您介绍如何使用事件发射器在vue.js中将数据及其状态从子组件传递到其父组件。这篇文章适合所有阶段的开发人员,包括初学者。

    在你开始之前…

    我们可以在Vue.js中使用道具将数据传递到的子组件一文中查看在Vue.js中将数据从父组件传递到子组件的方法。

    在阅读本文之前,您应该具备以下几点:

    node.js 10.x及以上版本已安装。您可以通过在终端/命令提示符下运行以下命令来验证是否执行此操作:

    node -v
    npm uninstall -g vue-cli

    然后,安装一个新的:

    npm install -g @vue/cli
    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>

    现在,您的标题更改为调用函数内的字符串单击。

    1.gif

    设置发射器

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

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

    更改测试中的脚本部分。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

    2.gif

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

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

    结论

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

    相关推荐:

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

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

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

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

    本文转载于:logrocket,如有侵犯,请联系a@php.cn删除
    专题推荐:Vue.js
    上一篇:Vue.js中使用无状态组件的方法介绍 下一篇:Vue.js中使用道具将数据传递到的子组件
    第13期线上培训班

    相关文章推荐

    • 15个Vue.js高级面试问题• 10+个顶级Vue.js工具和库(分享)• Vue中Computed属性、Methods和Watch之间的差异• Vue.js中使用动态组件的方法• 分享Vue项目中会用到的一些实战技巧点• 详解Vue.js中的作用域插槽

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网