vue3.0 父组件调用子组件里的方法,并且向子组件传递参数

父组件

<Feedback ref="RefFeedback"></Feedback>
import Feedback from '@/components/feedback'

components: {
  Feedback
},
setup () {
	const RefFeedback = ref()
    const handleFeedback = () => {
      RefFeedback.value.showSure(params.userCode) // 调用子组件的方法,传递参数
    }
}
return {
  RefFeedback,
  handleFeedback,
}

子组件

<template>
    <van-dialog title="感谢你反馈问题/需求"
        v-model:show='show'
        show-cancel-button
        confirm-button-text='提交'
        @confirm='handleConfirm'
        message-align='left'
      >
        <van-cell-group>
          <van-cell title="内容分类"></van-cell>
          <van-cell>
            <van-dropdown-menu :overlay='false' >
              <van-dropdown-item v-model="feedback.type" :options="contentClassify" @change='handleContentClassify'/>
            </van-dropdown-menu>
          </van-cell>
          <van-cell title="具体描述"></van-cell>
          <van-cell>
            <van-field
              v-model="feedback.remark"
              rows="1"
              autosize
              type="textarea"
              placeholder=""
            />
          </van-cell>
      </van-cell-group>
    </van-dialog>
</template>
<script>
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
import { Notify } from 'vant'

export default defineComponent({
  name: 'Feedback',
  setup () {
    const { proxy } = getCurrentInstance()
    const api = proxy.$api
    const data = reactive({
      feedback: {
        type: 1,
        remark: '请选择分类'
      },
      show: false,
      // 单选,枚举: 需增加门店,需新增产品线,需关闭产品线,门店已关闭,其他
      contentClassify: [{
        text: '需增加门店',
        value: 1,
        remark: '门店编号:'
      }, {
        text: '需新增产品线',
        value: 2,
        remark: '门店编号: 产品系列名称:'
      }, {
        text: '需关闭产品线',
        value: 3,
        remark: '门店编号: 产品系列名称:'
      }, {
        text: '门店已关闭',
        value: 4,
        remark: '门店编号:'
      }, {
        text: '其他',
        value: 0,
        remark: ''
      }]
    })
    const handleContentClassify = (value) => {
      data.contentClassify.filter(item => {
        if (value === item.value) {
          data.feedback.remark = item.remark
        }
      })
    }
    const handleConfirm = () => {
      api.store.feedbackCommit(data.feedback).then(res => {
        if (res.data.code === '0') {
          Notify({ type: 'success', message: '操作成功' })
          data.show = false
        }
      })
    }
    const showSure = (userCode) => { // 子组件方法接受参数
      data.feedback.userCode = userCode // 门店编号
      data.show = true
    }
    return {
      ...toRefs(data),
      handleContentClassify,
      handleConfirm,
      showSure
    }
  }
})
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值