在vue3中 <template #activator="{ props }"> <VBtn v-bind="props"> Open Dialog </VBtn> </template> 页面如何设置props值

在 Vue3 中，如果你想要给一个组件的 `props` 设置值，可以通过在组件标签上使用 `v-bind` 或简写的 `:` 语法，将值传递给组件的 `props`。

例如，在上面代码中的 `VBtn` 组件中，如果需要设置 `props` 的值，可以这样写：

<template>
  <VBtn :message="msg" :count="count" :isActive="isActive" :itemList="list" :userInfo="user"></VBtn>
</template>

<script>
import { defineComponent } from 'vue';
import VBtn from './VBtn.vue';

export default defineComponent({
  components: {
    VBtn,
  },
  data() {
    return {
      msg: 'Hello',
      count: 3,
      isActive: true,
      list: [1, 2, 3],
      user: {
        name: 'Tom',
        age: 18,
      },
    };
  },
});
</script>

在上面的代码中，我们给 `VBtn` 组件的 5 个 `props` 分别设置了值，这些值来自于当前组件的 data 中定义的变量。需要注意的是，这里使用了简写语法 `:` 来绑定 `props` 的值，它会自动将变量名作为 `props` 的属性名，将变量的值作为 `props` 属性的值。

当然，如果需要传递的值不是来自于当前组件的 data，也可以直接在组件标签上使用字面量的方式设置 `props` 的值，例如：

<template>
  <VBtn message="Hello" count="3" isActive :itemList="[1, 2, 3]" :userInfo="{ name: 'Tom', age: 18 }"></VBtn>
</template>

<script>
import { defineComponent } from 'vue';
import VBtn from './VBtn.vue';

export default defineComponent({
  components: {
    VBtn,
  },
});
</script>

在上面的代码中，我们直接在 `VBtn` 组件标签上使用了字面量的方式设置了 `props` 的值，这些值也可以被传递给 `VBtn` 组件使用。