vue3 setup语法 使用watch监听props中参数

很高兴能够回答你的问题。对于你的问题，我可以回答。在Vue3中，可以使用setup语法来监视props中的参数，可以使用watchEffect和watch。使用watchEffect可以自动监视props中的参数，而使用watch需要手动定义监视器函数。希望我的回答对你有所帮助。如果你有其他问题，欢迎继续提出。

相关问题

uniapp使用vue3setup语法糖组件间传值

uniApp采用Vue3的Composition API（也称为setup语法糖）是为了提供更简洁、更模块化的组件开发体验。在使用setup时，我们可以利用`ref`, ` reactive`, `onMounted`, `onUpdated`, 等API来进行状态管理，尤其是对于组件间的通信。

组件间传值通常有几种方式：

1. Props（父子组件传递）：父组件通过props向下传递数据给子组件，这是最基础的传值方式。在setup语法中，你可以直接将数据作为props传入。

// 父组件
<template>
  <child-component :value="parentValue" />
</template>

<script setup>
import { ref } from 'vue'
const parentValue = ref('初始值')
</script>

2. $emit 和 $on (事件总线)：如果需要在兄弟组件之间共享数据，可以创建一个全局的自定义事件总线（Event Bus）。但是，setup语法下推荐使用`provide`和`inject`代替：

// 全局事件总线
const eventBus = createLocalStore()

// 父组件提供数据
setup() {
  provide('sharedData', someSharedData)
}

// 子组件注入数据并监听更新
setup() {
  const sharedData = inject('sharedData')
  onMounted(() => {
    watch(sharedData, () => {/* 更新操作 */})
  })
}

3. Refs：通过refs，可以在子组件内部修改父组件的状态，并在父组件中接收变化。这适用于单向数据流场景，如表单联动。

尽管setup语法简化了部分代码结构，但它并没有改变基本的组件间通信原理。结合上述方式，你可以有效地在uniApp的Vue3项目中实现组件间的数据交互。

用vue3 setup语法糖写一个拖拽弹窗组件

好的，下面是用 Vue3 的 setup 语法糖写一个拖拽弹窗组件的示例代码：

<template>
  <div class="draggable-dialog" :style="{ left: dialogLeft + 'px', top: dialogTop + 'px' }">
    <div class="dialog-header" @mousedown="onHeaderMouseDown">
      <slot name="title">拖拽弹窗</slot>
      <button class="close-btn" @click="$emit('close')">关闭</button>
    </div>
    <div class="dialog-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const dialogLeft = ref(props.x)
    const dialogTop = ref(props.y)
    const dragging = reactive({ value: false })
    const mousePos = reactive({ x: 0, y: 0 })

    const onHeaderMouseDown = (event) => {
      event.preventDefault()
      dragging.value = true
      mousePos.x = event.clientX
      mousePos.y = event.clientY
    }

    const onDocumentMouseMove = (event) => {
      if (dragging.value) {
        const offsetX = event.clientX - mousePos.x
        const offsetY = event.clientY - mousePos.y
        dialogLeft.value += offsetX
        dialogTop.value += offsetY
        mousePos.x = event.clientX
        mousePos.y = event.clientY
      }
    }

    const onDocumentMouseUp = () => {
      dragging.value = false
    }

    // 监听 visible 属性的变化，隐藏或显示弹窗
    watch(() => props.visible, (val) => {
      if (val) {
        document.addEventListener('mousemove', onDocumentMouseMove)
        document.addEventListener('mouseup', onDocumentMouseUp)
      } else {
        document.removeEventListener('mousemove', onDocumentMouseMove)
        document.removeEventListener('mouseup', onDocumentMouseUp)
      }
    })

    // 初始化时直接绑定监听器
    if (props.visible) {
      document.addEventListener('mousemove', onDocumentMouseMove)
      document.addEventListener('mouseup', onDocumentMouseUp)
    }

    return {
      dialogLeft,
      dialogTop,
      onHeaderMouseDown
    }
  }
}
</script>

<style scoped>
.draggable-dialog {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1000;
}

.dialog-header {
  padding: 8px;
  background-color: #f2f2f2;
  cursor: move;
}

.dialog-body {
  padding: 16px;
}

.close-btn {
  float: right;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
</style>

这个组件的 props 包括 visible、x 和 y，分别表示弹窗是否可见、弹窗的左上角 x 坐标和 y 坐标。当 visible 变为 true 时，弹窗会显示出来并且可以拖拽。当 visible 变为 false 时，弹窗会隐藏并且停止拖拽。

组件内部使用 ref 和 reactive 两个响应式 API 来声明变量。dragging 和 mousePos 都是 reactive 变量，前者表示是否正在拖拽，后者表示鼠标的位置。dialogLeft 和 dialogTop 都是 ref 变量，表示弹窗的左上角位置。

onHeaderMouseDown 函数是鼠标按下事件的处理函数，它会将 dragging 设置为 true，表示开始拖拽，并且记录下鼠标的位置。onDocumentMouseMove 和 onDocumentMouseUp 分别是鼠标移动和鼠标抬起事件的处理函数，它们会根据鼠标的位置更新弹窗的位置，并且在拖拽结束时将 dragging 设置为 false。

最后，使用 watch 监听 visible 属性的变化，如果 visible 变为 true，就会绑定 document 的 mousemove 和 mouseup 事件；如果 visible 变为 false，就会移除这两个事件。如果组件初始化时 visible 就是 true，也需要直接绑定监听器。