Vue 3 Composition API 导出函数参数不更新

Question

我刚刚尝试将我的组件转换为组合 API 组件，发现导出函数的参数没有更新。

这是我的组件：

export default {
      name: "ListItem",
      components: {
           ListItemButton,
           InputSwitch
           },
      props:{
           item:{
                type: Array,
                required: true
           },
           dragable:{
                type: Boolean,
                required: true
           },
           dontShowButtons:{
                type: Boolean,
                default: false
           },
           dragItem:{
                type: Array,
                default: []
           },
           deaktivierbar:{
                type: Boolean
           }
      },
      setup(props, context){
           const buttonClicked = ref(false)
           const editMode = ref(false)
           const itemName = ref("")
           const itemDescription = ref("")
           const canDrag = ref(false)
           const activeState = ref(true)
           

           onMounted(()=>{
                canDrag.value = props.dragable
                itemName.value = props.item[0]
                itemDescription.value = props.item[1]
           })
           const { dragStart, dragEnd, checkForDragging, isDragging, showPlaceholder} = useDragFunction(props.dragItem)




      
           return{
                //Variables
                buttonClicked,
                isDragging,
                editMode,
                itemName,
                itemDescription,
                canDrag,
                showPlaceholder,
                activeState,   

                //functions
                dragStart,
                dragEnd,

           }
      }

这是我导出的函数：

    import { ref, computed, watch } from 'vue';

export default function useDragFunction( dragItem){
     const isDragging = ref(false)
     const showPlaceholder = ref(false)

     function dragStart(){
          isDragging.value = true
     }
     function dragEnd(){
          isDragging.value = false
     }
     function checkForDragging(){
          if (dragItem.length >0){
               showPlaceholder.value = true
          }
          else{
               showPlaceholder.value = false
          }
     } 

     return{
          dragStart,
          dragEnd,
          checkForDragging,
          isDragging,
          dragItem,
          showPlaceholder
     }
}

因此，当用户开始拖动时，将执行函数“checkForDragging()”。组件的 props 也会发生变化，以便将拖动的 Item 存储在 dragItem 变量中。如果我将所有内容写入组件，它就可以正常工作。如果我将它导出到该函数中，它就会停止工作。我发现传递的属性“dragItem”始终是“[]”。道具值不会更新。我确实尝试了所有方法，但我无法让它工作。

Answer 1

如果预计要更改道具，则不应按值传递，而应按引用传递，即作为 ref:

const dragItem = computed(() => props.dragItem);
const {...} = useDragFunction(dragItem);

并像这样使用：

if (dragItem.value.length >0){ ...

视情况而定，checkForDragging是多余的，showPlaceholder需要从dragItem计算：

const showPlaceholder = computed(() => dragItem.value.length >0);

Vue 3 Composition API 导出函数参数不更新

Vue 3 Composition API exported functions parameter dosnt update

vue.js

vue-composition-api