Vuejs更改组件元素值dynamicaly

Question

我在另外两个组件a、B之间有一个共同的组件。这个共享的Comp有一个按钮，它的名称会根据我使用的组件而更改。如何设置名称动态？我认为v型解决了问题我错过了什么？

应用程序vue:

<test-a></test-a>
<test-b></test-b>

共享Comp.vue：

<template>
<div>
{{ btnValue }}
<input type="button" v-model="btnValue" />
</div>
</template>

<script>
export default {
data() {
return {
btnValue: "",
};
},
};
</script>

CompA.vue

<template>
<div>
<shared-comp
v-for="(item, index) in 3"
:key="index"
:value="'A'"
></shared-comp>
</div>
</template>

<script>
import SharedComp from "./SharedComp.vue";
export default {
components: { SharedComp },
};
</script>

CompB.vue

<template>
<div>
<shared-comp :value="'B'"></shared-comp>
</div>
</template>

<script>
import SharedComp from "./SharedComp.vue";
export default {
components: { SharedComp },
};
</script>

Answer 1

您必须在"sharedComp"中定义传递给组件的属性。

试试类似的东西：

<template>
<div>
{{ value }}
<input type="button" v-model="value" />
</div>
</template>

<script>
export default {
props: ['value'],
};
</script>

有关Vue中道具的更多信息，请查看文档页面：https://v2.vuejs.org/v2/guide/components-props.html