zoukankan      html  css  js  c++  java
  • vue 中子组件或者公共组件向上一级传递数据 $emit的使用

    在子组件或者公共组件中,定义一个方法例如

    <li @click="selectItem(item)" v-for="item in group.items" class="list-group-item">
    

      然后在methods中使用

    selectItem(item){
            this.$emit('select',item);
    }

    $emit中的两个参数的含义是,一个是传递给父组件的方法,一个是传递给父组件方法的参数。

    也就是说,父组件通过使用子组件通过$emit传递的方法select及其参数,来得到传递的数据。

    并且,父组件直接使用的select方法其实就是自定义方法的用法,触发这种自定义方法就是子组件触发传递$emit的方法,也就是click。

     <ListView @select='selectSinger' :data="singers"></ListView>

    此处select既是子组件通过$emit传递的自定义方法

    selectSinger则是父组件接收select所带的参数的方法

    selectSinger(singer) {
            this.$router.push({
              path:`/singer/${singer.id}`
            })
     }

    参数singer既是子组件$emit所传递的item参数。

    若是有用并觉得不错,可以赞一个哟

  • 相关阅读:
    webpack入门(1)
    react基础(2)
    react基础(1)
    react入门(5)
    react入门(4)
    react入门(3)
    webstorm出现黑色块光标
    微信小程序——组件(二)
    微信小程序——组件(一)
    react-native 在Xcode上传到iTunes Connect里报错
  • 原文地址:https://www.cnblogs.com/zhoujx1066/p/7102716.html
Copyright © 2011-2022 走看看