Vue3调用子组件方法，清空数据ref，2022/6/4pm

最新推荐文章于 2024-05-17 15:33:19 发布

xumengxia—xu

最新推荐文章于 2024-05-17 15:33:19 发布

阅读量2.6k

点赞数 1

分类专栏：工作2022年5月，记录生活的每一天文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_56514785/article/details/125121627

版权

工作2022年5月，记录生活的每一天专栏收录该内容

37 篇文章 1 订阅

订阅专栏

父组件

<template>
  <div class="microstores">
    <div class="container">
   
    <!-- 搜索模块 -->
    <div class="search">
    <el-row :gutter="20" class="row-bg" justify="space-between">
    <el-col :span="8">
      <span class="labletitle">Start Time :</span>
       <!-- 子组件 -->
      <dataPicker  ref="startValueRef"></dataPicker>
    </el-col>
    
       </div>
    </el-col>
  </el-row>
  </div>

    </div>

  </div>
</template>

<script lang="ts" >
import { defineComponent, onMounted, toRefs, reactive, ref } from 'vue'
import dataPicker from '@/components/dataPicker.vue'
export default defineComponent({
  name: 'Microstores',
  components: {

    dataPicker
  },
  setup () {

    const startValue = ref() 
    const startValueRef = ref()
    const data = reactive({
      handleReset () {
        startValueRef.value.startValues = ''
      
      }
    })
    return {
      ...toRefs(data), startValue,  startValueRef// 日期组件

    }
  }

})
</script>
<style lang="less" scoped>

</style>

子组件
<template>
  <div class="about">
    <!-- {{startValues}} -->
   <el-date-picker
        style="width:100%;height:40px"
        v-model="startValues"
        type="datetime"
        format="YYYY/MM/DD hh:mm:ss"
      >
       <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text }}</span>
        </div>
      </template>
      </el-date-picker>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, computed } from 'vue'
export default defineComponent({
  name: 'dataPicker',
  setup (props, ctx) {
    const data = reactive({
      startValues: '',
      

    })
    return {
      ...toRefs(data)

    }
  }

})
</script>
<style lang="less" scoped>

</style>