Vue js更改外部组件的道具答案

【问题标题】：Vue js change props of an external componentVue js更改外部组件的道具
【发布时间】：2019-03-13 10:17:20
【问题描述】：

我使用库元素.IO，我想在选择有值“a”时，在输入上将“禁用”支柱更改为true。

选择：

<el-select v-model="selected_devise" slot="append" placeholder="Devise">
    <el-option
        v-for="item in devises"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
</el-select>

选择的值：

devises: [
{
    label: 'a',
    value: 'a',
},
{
    label: 'b',
    value: 'b',
},
{
    label: 'c',
    value: 'c',
}]

当我选择“b”时，我想将我的输入设置为禁用，为此我必须编辑道具：

<el-input type="text" ref="montant" v-model="montant" placeholder="Saisissez le montant"></el-input>

当我尝试使用 this.$refs.montant.$props.disabled = true;我明白了：

避免直接修改 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“禁用”

感谢您的帮助

【问题讨论】：

你不应该直接在子组件中改变一个道具。相反，您应该做的是使用this.$emit 在子组件中发出自定义事件，并让父组件监听该事件并改变道具。 Please refer to this
好的，我看到了“想法”，可以给我详细信息吗？因为我使用 elementUI（外部库组件）

标签： vue.js vuejs2

【解决方案1】：

大概是这样的

<el-input 
   type="text" 
   ref="montant" 
   v-model="montant" 
   placeholder="Saisissez le montant" 
   :disabled="selected_devise=='b'"
></el-input>

（假设 el-input 和 el-select 是同一个组件的子组件）

【讨论】：