在vue3中 <template #activator="{ props }"> <VBtn v-bind="props"> Open Dialog </VBtn> </template> 页面如何设置props值
时间: 2023-12-03 14:02:29 浏览: 77
vue中使用props传值的方法
5星 · 资源好评率100%
在 Vue3 中,如果你想要给一个组件的 `props` 设置值,可以通过在组件标签上使用 `v-bind` 或简写的 `:` 语法,将值传递给组件的 `props`。
例如,在上面代码中的 `VBtn` 组件中,如果需要设置 `props` 的值,可以这样写:
```vue
<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` 的值,例如:
```vue
<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` 组件使用。
阅读全文