V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
17681880207
V2EX  ›  问与答

Vue3 双向绑定报错

  •  
  •   17681880207 · 2021-11-29 21:45:48 +08:00 · 751 次点击
    这是一个创建于 850 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用到的组件:el-drawer

    父组件:

    <template>
      <div>
        <el-button
            type="primary"
            @click="openDetailsDrawer">
          View Details
        </el-button>
        <p>{{ myDrawer.visible }}</p>
    
        <details-drawer
            v-model:visible="myDrawer.visible"
            :payload="myDrawer.payload"/>
      </div>
    </template>
    
    <script lang="ts" setup>
    import {reactive, nextTick, ref} from 'vue'
    import DetailsDrawer from './components/DetailsDrawer/index.vue'
    
    const myDrawer = reactive({
      visible: false,
      payload: {
        title: '',
        content: ''
      }
    })
    
    const openDetailsDrawer = () => {
      myDrawer.visible = true
      nextTick(() => {
        myDrawer.payload.title = '标题' + new Date().getTime()
        myDrawer.payload.content = '内容' + new Date().getTime()
      })
    }
    </script>
    

    子组件:

    <template>
      <el-drawer
          v-model="visible"
          :title="payload.title"
          :before-close="updateVisible">
        <template #default>
          {{ payload.content }}
          <el-button @click="handleClose">Close</el-button>
        </template>
      </el-drawer>
    </template>
    
    <script lang="ts" setup>
    import {defineProps, defineEmits} from 'vue'
    
    const props = defineProps({
      visible: {
        type: Boolean,
        default: false
      },
      payload: {
        type: Object,
        default: () => {
          return {}
        }
      }
    })
    
    const emits = defineEmits<{
      (e: 'update:visible', visible: boolean): void
    }>()
    
    const updateVisible = () => {
      emits('update:visible', false)
    }
    </script>
    
    

    问题
    不论我在子组件<el-drawser/>

    1. :before-close ;
    2. @closed ;
    3. @close ;

    任何一个方法调用 updateVisible 方法,都会报如下错误:

    ReferenceError: visible is not defined
    
    1 条回复    2021-11-30 16:20:12 +08:00
    oyadubanana
        1
    oyadubanana  
       2021-11-30 16:20:12 +08:00
    解决了吗?
    另外就是,defineProps 和 defineEmits 不需要引入。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1419 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:26 · PVG 01:26 · LAX 10:26 · JFK 13:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.