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

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

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

相关阅读

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

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

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

相关 VUE父组件向子组件传递数据

在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组

秒速五厘米/ 2023年03月02日 15:57/ 0 赞/ 12 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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