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

超、凢脫俗 2022-09-09 01:51 306阅读 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 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父组件调用子组件方法

组件 <template> <div> child </div> </template> <...

待我称王封你为后i/ 2024年04月17日 19:58/ 0 赞/ 39 阅读

相关 vue中父组件向子组件传递值、方法

> 在vue中子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。一、父组件向子组件传值通过 props

ゝ一世哀愁。/ 2023年07月13日 11:00/ 0 赞/ 123 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 269 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 226 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 244 阅读

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

父组件 <Feedback ref="RefFeedback"></Feedback> import Feedback from '@/components

超、凢脫俗/ 2022年09月09日 01:51/ 0 赞/ 307 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 461 阅读

相关 vue子组件调用父组件方法

说明：有一个组件InputListSelect.vue，选中一个行数据，将该数据传送到父级ProjectEdit.vue文件中 1、父级ProjectEdit.vue调用

桃扇骨/ 2022年02月18日 14:21/ 0 赞/ 330 阅读

相关 Vue父组件向子组件传递参数

1、父组件projectBatchsindex.vue // 使用:projectId="this.projectId" 传递参数 <ProjectBatch

以你之姓@/ 2022年02月14日 09:17/ 0 赞/ 309 阅读

相关 Vue入门-子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信 > 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), > > 该方法在子组件的methods中声明,实现功能th

太过爱你忘了你带给我的痛/ 2021年09月15日 14:22/ 0 赞/ 458 阅读