最近在写vue.js的时候感觉有好多可以分享的东西,但是一直没时间,今天来分享一点点小技巧。

先说父组件里面的写法,引入子组件

import userInfo from './components/userInfo'

然后在使用的使用用监听子组件中的updateUserStatus,并传值给父组件中的updateData方法

<user-info v-on:updateUserStatus="updateData"></user-info>

这是父组件中的updateData方法

    updateData: function(msg) {
        // 关闭弹出页
        this.dialogFormVisible = false
        // 如果禁用成功
        if (msg === 200) {
          // 循环列表找到被禁用的数据移出数组
          for (const v of this.list) {
            if (v.user_guid === this.temp.user_guid) {
              const index = this.list.indexOf(v)
              this.list.splice(index, 1)
              break
            }
          }
        }
      }

父组件介绍完了,咱们看看子组件的写法

当点击禁用的时候出发一个函数updateUserStatus

<el-button style="width: 100%" type="danger" @click="updateUserStatus()">禁用</el-button>

updateUserStatus()的内容是

  methods: {
    update() {
      // 开启loading
      this.listLoading = true
      // 封装好的请求接口
      updateUser(this.listQuery).then(response => {
        if (response && (response.ServerNo === 200)) {
          this.$notify({
            title: '成功',
            message: '禁用成功',
            type: 'success',
            duration: 2000
          })
          // 【重点】向updateUserStatus发送一个参数,值为200,父组件一直在监听这里,后面的200就是需要向父组件传送的值
          this.$emit('updateUserStatus', 200)
        } else {
          this.$notify({
            title: '失败',
            message: '禁用失败',
            type: 'error',
            duration: 2000
          })
          this.$emit('updateUserStatus', 400)
        }
        this.listLoading = false
      })
    },
    updateUserStatus() {
      // 获取用户的guid
      this.listQuery.member_id = this.userInfo.user_guid
      this.update()
    }
  }

就这样就简单的实现了子组件向父组件传值了