如何在尚未对其进行评估的情况下将变量传递给自定义组件？

Posted 2023-02-23

【中文标题】如何在尚未对其进行评估的情况下将变量传递给自定义组件？

【英文标题】：How do I pass a variable through to a custom component without having it evaluated yet?

【发布时间】：2019-04-15 03:08:57

【问题描述】：

我有一个自定义组件：

<template>
  <div class="form-group">
    <label for="desc">label</label>
    <input id="desc" type="text" class="form-control input-sm"
           :name="label"
           :readonly="readonly"
           v-bind:value="value"
           v-on:input="$emit('input', $event.target.value)"
           v-validate="validate"
    />
    <div class="error-feedback"> errors.first(label) </div>
    readonly<!-- debugging -->
  </div>
</template>

<script>
export default 
  name: 'FormGroup',
  props: 
    label: String,
    value: String,
    readonly: String,
    validate: String
  ,
  data: function() 
    return 
    
  

</script>

<style scoped>
  .error-feedback 
    color: #cc3333;
  
</style>

当我调用它时：

  <FormGroup label="Channel" readonly="device_config.enabled" validate="required" v-model="device_config.some_setting" />

自定义组件接收'readonly'属性作为文字字符串"device_config.some_setting"，而不是device_config.some_setting中包含的值。

如何让我的自定义组件使字段只读依赖于传入的调用组件模型中的值？

【问题讨论】：

在readonly前面添加:或v-bind:绑定它

【参考方案1】：

使用v-bind:readonly="setting" 和setting 应该是在你的父组件中定义的属性：

    <FormGroup label="Channel" :readonly="setting" validate="required" v-model="device_config.some_setting" />