uni-app vue3编译到支付宝小程序无法通过instance.proxy.$refs获取到组件实例

uni-app vue3编译到支付宝小程序无法通过instance.proxy.$refs获取到组件实例

··· <template> <view class="fu-p-y-30"> <demo-desc margin="0 15px 15px"> 此组件选择器用于单列、多列联动的的选择场景。 </demo-desc>

<fu-cell-group>  
    <block v-for="(item,index) in list" :key="index">  
        <fu-cell :title="item.name" rightColor="#999999" isLink @click="handleClick(index)"></fu-cell>  
    </block>  
</fu-cell-group>  

<fu-picker ref="pickerRef1" :columns="columns1" :maskClosable="false"></fu-picker>  
<fu-picker ref="pickerRef2" :columns="columns2" :defaultIndex="[2]" :maskClosable="false"></fu-picker>  
<fu-picker ref="pickerRef3" :columns="columns3" :maskClosable="false" @change="changeHandler3"></fu-picker>  
<fu-picker ref="pickerRef4" :columns="columns4" keyName="name" :maskClosable="false" @change="changeHandler4"></fu-picker>  
<fu-picker ref="pickerRef5" :columns="columns5" :maskClosable="false" title="标题太长就会显示省略..."></fu-picker>  
<fu-picker ref="pickerRef6" :columns="columns6"></fu-picker>  
<fu-picker ref="pickerRef7" :columns="columns7" @change="change">  
    <view class="fu-bg-03-02">  
        <view class="fu-flex fu-flex-row-between">  
            <view class="fu-w-120 fu-text-c fu-l-h-86 fu-color-999999" @click="pickerRef7.close()">关闭</view>  
            <view class="fu-w-120 fu-text-c fu-l-h-86" @tap="affirm">确定</view>  
        </view>  
        <view class="fu-m-x-30">  
            <fu-input placeholder="请输入关键词" height="22" shape="circle" prefixIcon="magnifier"></fu-input>  
        </view>  
    </view>  
</fu-picker>
</view> </template> <script setup> import { getCurrentInstance, ref, reactive, computed, onMounted } from 'vue'; import regions from './regions.json'; // data数据 const instance = getCurrentInstance(); const { $fu } = instance.appContext.config.globalProperties; const pickerRef1 = ref(); const pickerRef2 = ref(); const pickerRef3 = ref(); const pickerRef4 = ref(); const pickerRef5 = ref(); const pickerRef6 = ref(); const pickerRef7 = ref(); const columns1 = reactive([['中国', '美国', '巴西', '日本']]); const columns2 = reactive([['中国', '美国', '巴西', '日本']]); const columns3 = reactive([ ['中国', '美国'], ['深圳', '厦门', '上海', '拉萨'] ]); const columnData3 = reactive([ ['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加'] ]); let columns4Data = ref({ provinces: [], // 省 citys: [], // 市 areas: [], // 区 pickerValue: [0, 0, 0], defaultValue: [3442, 1, 2] }); const columns5 = reactive([['中国', '美国', '巴西', '日本']]); const columns6 = reactive([['中国', '美国', '巴西', '日本']]); const columns7 = reactive([['中国', '美国', '巴西', '日本']]); let columns6Index = ref(0); const list = ref([ { name: '基础案例' }, { name: '设置默认项' }, { name: '多列联动' }, { name: '省市区三级联动' }, { name: '设置标题' }, { name: '允许点击遮罩关闭' }, { name: '插槽自定义工具栏' } ]); // 生命周期 onMounted(() => { getData() }); // computed计算属性 const columns4 = computed(() => { return [columns4Data.value.provinces, columns4Data.value.citys, columns4Data.value.areas] }); // methods方法 const handleClick = (e) => { console.log(pickerRef1); instance.proxy.$refs[`pickerRef${e + 1}`].open() }; const changeHandler3 = (e) => { const { columnIndex, value, values, // values为当前变化列的数组内容 index, indexs, // 微信小程序无法将picker实例传出来，只能通过ref操作 picker = pickerRef3.value } = e; // 当第一列值发生变化时，变化第二列(后一列)对应的选项 if (columnIndex === 0) { // picker为选择器this实例，变化第二列对应的选项 picker.setColumnValues(1, columnData3[index]) } }; const changeHandler4 = (e) => { const { columnIndex, value, values, // values为当前变化列的数组内容 index, indexs, // 微信小程序无法将picker实例传出来，只能通过ref操作 picker = pickerRef4.value } = e; if (columnIndex === 0) { columns4Data.value.citys = columns4Data.value.provinces[index]?.children || [] columns4Data.value.areas = columns4Data.value.citys[0]?.children || [] pickerRef4.value.setIndexs([index, 0, 0],true) } else if (columnIndex === 1) { columns4Data.value.areas = columns4Data.value.citys[index]?.children || []; pickerRef4.value.setIndexs(indexs, true) } }; const affirm = () => { pickerRef6.value.close() $fu.toast(`当前确认：${columns6[0][columns6Index.value]}`) }; const change = (e) => { columns6Index.value = e.index; }; const getData = () => { columns4Data.value.provinces = regions.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1)); handlePickValue() }; const handlePickValue = () => { // 设置省 columns4Data.value.pickerValue[0] = columns4Data.value.provinces.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[0]); // 设置市 columns4Data.value.citys = columns4Data.value.provinces[columns4Data.value.pickerValue[0]]?.children || []; columns4Data.value.pickerValue[1] = columns4Data.value.citys.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[1]); // 设置区 columns4Data.value.areas = columns4Data.value.citys[columns4Data.value.pickerValue[1]]?.children || []; columns4Data.value.pickerValue[2] = columns4Data.value.areas.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[2]); // 重置下位置 pickerRef4.value.setIndexs([columns4Data.value.pickerValue[0], columns4Data.value.pickerValue[1], columns4Data.value.pickerValue[2]], true); }; </script> <style lang="scss"> page { background-color: #FFFFFF; } .picker-box { background-color: #f4f4f4; margin-top: 10px; padding: 10px 20px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; } </style>

···


更多关于uni-app vue3编译到支付宝小程序无法通过instance.proxy.$refs获取到组件实例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

vue3 可以通过 ref 来获取组件实例

更多关于uni-app vue3编译到支付宝小程序无法通过instance.proxy.$refs获取到组件实例的实战教程也可以访问 https://www.itying.com/category-93-b0.html


微信小程序、h5、APP都没问题，但是支付宝小程序获取到的是一个proxy，vue3不能通过proxy直接操作里面的方法

回复 fusions: ref不生效？

回复 fusions: 你发个简易demo

支付宝小程序勾选component2就可以了，但是无法通过instance.proxy.$refs操作实例

回复 fusions: instance.proxy.$refs 这个应该是bug，其他小程序正常，我看看怎么修复一下

我看了一下官方文档component2是默认true的，但是运行的支付宝开放平台每次都要勾选

manifest.json mp-alipay 节点下加配置，支付宝小程序开发者工具的新版配置
“compileOptions”: {
“component2”: true
},

在支付宝小程序环境中，Vue 3的instance.proxy.$refs确实存在获取组件实例的限制。这是因为支付宝小程序的渲染机制与Web环境不同，导致通过$refs获取的组件实例可能为undefined或无法正常调用方法。

解决方案：

  1. 直接使用模板引用：
const handleClick = (e) => {
  const refName = `pickerRef${e + 1}`
  const pickerRef = eval(refName).value
  pickerRef?.open()
}
  1. 使用ref数组：
const pickerRefs = [pickerRef1, pickerRef2, pickerRef3, pickerRef4, pickerRef5, pickerRef6, pickerRef7]

const handleClick = (index) => {
  pickerRefs[index]?.value?.open()
}
  1. 兼容性处理：
const handleClick = (e) => {
  const refName = `pickerRef${e + 1}`
  const pickerRef = instance.proxy.$refs[refName] || eval(refName).value
  pickerRef?.open()
}
回到顶部