Vue Js 动态改变组件元素值

Question

我在其他两个组件 A、B 之间有一个共同组件。这个共享的 Comp 有一个按钮，它的名称会根据我使用的组件而改变。如何设置动态名称？我以为 v-model 解决了这个问题我错过了什么？

App.vue:

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

sharedComp.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 中 Props 的更多信息，请查看文档页面：https://vuejs.org/v2/guide/components-props.html

Vue Js 动态改变组件元素值

Vuejs change component element value dynamicaly

vue.js

vue-component

vuejs2