【报Bug】defineComponent语法糖通过ref无法获取实例

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 12.0.1 (21A559)

HBuilderX版本号： 3.4.7

第三方开发者工具版本号： 1.06.2206090

基础库版本号： 2.24.5

项目创建方式： CLI

CLI版本号： 3.0.0-alpha-3040220220310004

示例代码：

<Popup class="popup" ref="popupRef">  
      <view slot="header">  
        添加员工  
      </view>  
      <view class="wrap">  
        <view class="item">  
          <view class="name"> 姓名 </view>  
          <view class="input">  
            <input type="text" :value="name" data-key="name" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入姓名">  
          </view>  
        </view>  
        <view class="item">  
          <view class="name"> 手机号 </view>  
          <view class="input">  
            <input type="number" :value="mobile" data-key="mobile" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入手机号">  
          </view>  
        </view>  
      </view>  
      <view slot="footer" class="footer">  
        <view class="btn" :class="addFlag ? 'have' : 'nothing'">确定添加</view>  
      </view>  
    </Popup>


export default defineComponent({  
  name: 'accountManage',  
  components: {  
    Popup  
  },  
  setup() {  
    const name = ref('');  
    const mobile = ref('');  
    const addFlag = ref(false);  
    const handelInput = (e) => {  
      const key = e.target.dataset.key;  
      if (key === 'name') {  
        name.value = e.target.value;  
      } else if (key === 'mobile') {  
        mobile.value = e.target.value;  
      }  
      name.value!='' && mobile.value!='' ? addFlag.value = true : addFlag.value = false;  
    }  
    const popupRef = ref(null);  
    const addRole = () => {  
      console.log(popupRef,'popupRef')//空的  
      // popupRef.value.show();  
    }  
    return {  
      name,  
      mobile,  
      addFlag,  
      handelInput,  
      addRole  
    };  
  }  
})

操作步骤：

<Popup class="popup" ref="popupRef">  
      <view slot="header">  
        添加员工  
      </view>  
      <view class="wrap">  
        <view class="item">  
          <view class="name"> 姓名 </view>  
          <view class="input">  
            <input type="text" :value="name" data-key="name" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入姓名">  
          </view>  
        </view>  
        <view class="item">  
          <view class="name"> 手机号 </view>  
          <view class="input">  
            <input type="number" :value="mobile" data-key="mobile" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入手机号">  
          </view>  
        </view>  
      </view>  
      <view slot="footer" class="footer">  
        <view class="btn" :class="addFlag ? 'have' : 'nothing'">确定添加</view>  
      </view>  
    </Popup>


export default defineComponent({  
  name: 'accountManage',  
  components: {  
    Popup  
  },  
  setup() {  
    const name = ref('');  
    const mobile = ref('');  
    const addFlag = ref(false);  
    const handelInput = (e) => {  
      const key = e.target.dataset.key;  
      if (key === 'name') {  
        name.value = e.target.value;  
      } else if (key === 'mobile') {  
        mobile.value = e.target.value;  
      }  
      name.value!='' && mobile.value!='' ? addFlag.value = true : addFlag.value = false;  
    }  
    const popupRef = ref(null);  
    const addRole = () => {  
      console.log(popupRef,'popupRef')//空的  
      // popupRef.value.show();  
    }  
    return {  
      name,  
      mobile,  
      addFlag,  
      handelInput,  
      addRole  
    };  
  }  
})

预期结果：

<Popup class="popup" ref="popupRef">  
      <view slot="header">  
        添加员工  
      </view>  
      <view class="wrap">  
        <view class="item">  
          <view class="name"> 姓名 </view>  
          <view class="input">  
            <input type="text" :value="name" data-key="name" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入姓名">  
          </view>  
        </view>  
        <view class="item">  
          <view class="name"> 手机号 </view>  
          <view class="input">  
            <input type="number" :value="mobile" data-key="mobile" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入手机号">  
          </view>  
        </view>  
      </view>  
      <view slot="footer" class="footer">  
        <view class="btn" :class="addFlag ? 'have' : 'nothing'">确定添加</view>  
      </view>  
    </Popup>


export default defineComponent({  
  name: 'accountManage',  
  components: {  
    Popup  
  },  
  setup() {  
    const name = ref('');  
    const mobile = ref('');  
    const addFlag = ref(false);  
    const handelInput = (e) => {  
      const key = e.target.dataset.key;  
      if (key === 'name') {  
        name.value = e.target.value;  
      } else if (key === 'mobile') {  
        mobile.value = e.target.value;  
      }  
      name.value!='' && mobile.value!='' ? addFlag.value = true : addFlag.value = false;  
    }  
    const popupRef = ref(null);  
    const addRole = () => {  
      console.log(popupRef,'popupRef')//空的  
      // popupRef.value.show();  
    }  
    return {  
      name,  
      mobile,  
      addFlag,  
      handelInput,  
      addRole  
    };  
  }  
})

实际结果：

<Popup class="popup" ref="popupRef">  
      <view slot="header">  
        添加员工  
      </view>  
      <view class="wrap">  
        <view class="item">  
          <view class="name"> 姓名 </view>  
          <view class="input">  
            <input type="text" :value="name" data-key="name" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入姓名">  
          </view>  
        </view>  
        <view class="item">  
          <view class="name"> 手机号 </view>  
          <view class="input">  
            <input type="number" :value="mobile" data-key="mobile" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入手机号">  
          </view>  
        </view>  
      </view>  
      <view slot="footer" class="footer">  
        <view class="btn" :class="addFlag ? 'have' : 'nothing'">确定添加</view>  
      </view>  
    </Popup>


export default defineComponent({  
  name: 'accountManage',  
  components: {  
    Popup  
  },  
  setup() {  
    const name = ref('');  
    const mobile = ref('');  
    const addFlag = ref(false);  
    const handelInput = (e) => {  
      const key = e.target.dataset.key;  
      if (key === 'name') {  
        name.value = e.target.value;  
      } else if (key === 'mobile') {  
        mobile.value = e.target.value;  
      }  
      name.value!='' && mobile.value!='' ? addFlag.value = true : addFlag.value = false;  
    }  
    const popupRef = ref(null);  
    const addRole = () => {  
      console.log(popupRef,'popupRef')//空的  
      // popupRef.value.show();  
    }  
    return {  
      name,  
      mobile,  
      addFlag,  
      handelInput,  
      addRole  
    };  
  }  
})

bug描述：

<Popup class="popup" ref="popupRef">  
      <view slot="header">  
        添加员工  
      </view>  
      <view class="wrap">  
        <view class="item">  
          <view class="name"> 姓名 </view>  
          <view class="input">  
            <input type="text" :value="name" data-key="name" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入姓名">  
          </view>  
        </view>  
        <view class="item">  
          <view class="name"> 手机号 </view>  
          <view class="input">  
            <input type="number" :value="mobile" data-key="mobile" @input="handelInput" placeholder-class="placeholder"  
              placeholder="请输入手机号">  
          </view>  
        </view>  
      </view>  
      <view slot="footer" class="footer">  
        <view class="btn" :class="addFlag ? 'have' : 'nothing'">确定添加</view>  
      </view>  
    </Popup>


export default defineComponent({  
  name: 'accountManage',  
  components: {  
    Popup  
  },  
  setup() {  
    const name = ref('');  
    const mobile = ref('');  
    const addFlag = ref(false);  
    const handelInput = (e) => {  
      const key = e.target.dataset.key;  
      if (key === 'name') {  
        name.value = e.target.value;  
      } else if (key === 'mobile') {  
        mobile.value = e.target.value;  
      }  
      name.value!='' && mobile.value!='' ? addFlag.value = true : addFlag.value = false;  
    }  
    const popupRef = ref(null);  
    const addRole = () => {  
      console.log(popupRef,'popupRef')//空的  
      // popupRef.value.show();  
    }  
    return {  
      name,  
      mobile,  
      addFlag,  
      handelInput,  
      addRole  
    };  
  }  
})

2022-06-16 18:08 负责人:无分享

2 个回复

DCloud_UNI_WZF

popupRef 没有 return，其次没看到 addRole 的调用，要在组件挂载后获取

1***@163.com (作者)

<view class="add-man" @click="addRole">

<img src="../../static/addMan.png" mode="aspectFit" alt="">

<view> 添加员工</view>

</view>

代码没全部复制，不好意思

export default defineComponent({

name: 'popup',

props: {

position: {

type: String,

default: 'bottom'

},

},

setup() {

const hidden = ref(false);

const cancel = () => {

hidden.value = false;

}

const show = () => {

hidden.value = true;

}

return {

hidden,

cancel,

show

};

}

})

2022-06-17 16:06

1***@163.com (作者)

<template>  
  <view>  
    <view class="modal-view" :class="[`modal-view-${position}`, hidden ? 'show' : '']">  
      <view class="modal-container">  
        <view class="modal-header">  
          <slot name="header"></slot>  
          <view class="cancel" @tap.stop="cancel"></view>  
        </view>  
        <scroll-view class="scroll" scroll-y="true">  
          <slot></slot>  
        </scroll-view>  
        <view class="modal-footer">  
          <slot name="footer"></slot>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>  
<script>  
import { ref, defineComponent,defineExpose } from 'vue';  
export default defineComponent({  
  name: 'popup',  
  props: {  
    position: {  
      type: String,  
      default: 'bottom'  
    },  
  },  
  setup() {  
    const hidden = ref(false);  
    const cancel = () => {  
      hidden.value = false;  
    }  
    const show = () => {  
      hidden.value = true;  
    }  
    return {  
      hidden,  
      cancel,  
      show  
    };  
  }  
})  
</script>  
<style lang="scss">  
.modal-view {  
  position: fixed;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  z-index: 999;  
  background: rgba(0, 0, 0, .5);  
  display: flex;  
  transition: all .2s linear;  
  visibility: hidden;  
  opacity: 0;  

  .modal-container {  
    background: #fff;  
    transition: transform .2s linear;  
    position: relative;  
    overflow: hidden;  
    border-radius: 16rpx 16rpx 0 0;  

    .modal-header {  
      height: 112rpx;  
      text-align: center;  
      position: relative;  
      line-height: 112rpx;  
      font-weight: 500;  
      color: #333333;  
      font-size: 36rpx;  

      .cancel {  
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAYZJREFUWEfVl0tugzAURX2RsoVKXVY7SVfAZwmdNEonXQKfFTSTZFmVuoVK3IrIIHBs82yIaJmC3z2+9vsAtfGDjfXV3wIoy/IBwDFJki+SH1mW/azhUF3XOwCvbds+kjwURfHdx504UFVVCSDvXgK4kNwvhdDiJ5JPXVySVZ7nhRWgaZo3ksfh5UKITpzkCcBVXG/skKbpuxXApF3ihEP8xtWbSyhd6LsbITGsWRASwAQJXetMw9BAHUjMGm8dCAkY8u3YtdlCZAtM8gJgSNFY8esllxQaH4TObTPVxDVEBOA6X6XUWW/gObZ2iAE8EIOJMdUzCKCHUEp9KqWGXS8pWP8LoLuMtt3Hnr84CzzWn0nCaDbiDBAD2NJQZ8DL3dPQJ97PCncrRBLx/vxjIbzNCMAwyWirJyXY1gnNNXO1wdmOQ8XHToRAWAeSWPEYiAmAbSQzO5+kefVpK3FiAmAOpbHiM064h9LxWL5U3AXhHcs3/zGRnu+a3wV3wzXFxb1gbdFxvF86JvgwJeevNgAAAABJRU5ErkJggg==);  
        width: 32rpx;  
        height: 32rpx;  
        background-size: 100% 100%;  
        background-repeat: no-repeat;  
        position: absolute;  
        right: 32rpx;  
        top: 50%;  
        transform: translateY(-50%);  
      }  
    }  

    .scroll {  
      height: calc(100% - 112rpx - 96rpx);  
    }  

    .modal-footer {  
      position: absolute;  
      bottom: 0;  
      height: 96rpx;  
      width: 100%;  
      background: #fff;  
      padding: 8rpx 24rpx;  
      box-sizing: border-box;  
    }  
  }  
}  

.modal-view-bottom {  
  align-items: flex-end;  

  .modal-container {  
    width: 100%;  
    height: 50vh;  
  }  
}  

.modal-view.show {  
  opacity: 1;  
  visibility: visible;  

  .modal-container {  
    transform: translate3d(0, 0, 0);  
  }  
}  
</style>

该问题目前已经被锁定, 无法添加新回复

【报Bug】defineComponent语法糖通过ref无法获取实例

bug描述：

2 个回复

公告

相关问题

【报Bug】defineComponent语法糖通过ref无法获取实例

bug描述：

与内容相关的链接

2 个回复

公告

相关问题