vue3 component标签传参
时间: 2024-08-16 14:06:43 浏览: 121
Vue传参一箩筐(页面、组件)
在Vue 3中,`<component>` 标签用于动态地加载和渲染组件。如果你想通过这个标签传参给组件,可以利用JavaScript表达式或直接属性绑定的方式来进行。这里有两种常见的方法:
1. **通过props传递**:
当你有一个自定义组件,可以通过`props`属性接收外部传入的数据。例如:
```html
<template>
<div>
<component :is="selectedComponent" :prop1="param1" :prop2="param2"></component>
</div>
</template>
<script setup>
import ChildComponentA from '@/components/ChildComponentA.vue';
import ChildComponentB from '@/components/ChildComponentB.vue';
const selectedComponent = 'ChildComponentA'; // 可以动态切换为'ChildComponentB'
const param1 = 'some value';
const param2 = 'another value';
const components = {
ChildComponentA,
ChildComponentB,
};
</script>
```
2. **使用ref和v-bind动态绑定**:
如果参数值需要在运行时动态设置,可以使用`ref`创建一个引用,然后在`v-bind`中更新其值:
```html
<template>
<div>
<component ref="myComponent" v-bind="{ myProp: myValue }"></component>
</div>
</template>
<script setup>
const myValue = ref('default-value');
// ...
function updateMyParam(newValue) {
myValue.value = newValue;
}
</script>
```
阅读全文