Javascript 自定义组件'；在vue js中的子组件中使用getElementbyId无法渲染s style

我对组件的定义如下：

<template>
  <div>
    <span style="font-size: 16px">{{label}}</span>
    <!-- <label style="font-size: 15px">{{ label }}</label> -->
    <input
      :class="{input:isSuccess, input_danger:isDanger, input_disabled:isDisabled}"
      :style="{width:width}"
      :id="id"
      :type="type"
      :max="max"
      :min="min"
      :state="state"
      :placeholder="placeholder"
      :disabled="disabled"
      :value="value"
      @input="handleInput"
      @change="change"
    />
  </div>
</template>

<script>
import TransformationVue from '../../pages/Transformation.vue';
export default {
  props: {
    value: [Number, String],
    id: String,
    label: String,
    min: Number,
    max: Number,
    type: String,
    state: Boolean,
    placeholder: [Number, String],
    isDanger:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:'100%'
    }
  },
  data() {
    return {
      minVal:this.min,
      
    };
  },
  watch:{
    disabled:function(){
      alert('hello')
    }
  },
  computed:{
    isSuccess:function(){
      if(this.isDanger == false && this.disabled == false ){
        return true
      }else {
        return false
      }
    },
    isDisabled:function(){
      if(this.disabled ==true){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    change(e) {
      if(this.type == 'number'){
        if(e.target.value<this.min || e.target.value > this.max){
          this.$emit("input", this.minVal)
          this.$toast.error("Out of range!, Allowed range is "+this.min+" to" + this.max, { timeout: 6000 });
        }else{
          this.$emit("change")
        }
      }else{
      this.$emit("change");
      }
    },
  },
};
</script>
<style scoped>

.input {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid #116b9d;
}
.input:hover {
  border-bottom:4px solid #93d9ff;
  background:rgb(255, 255, 255);
  transition: none;
}
.input:focus {
  border-bottom:4px solid #93d9ff;
  background:rgb(255, 255, 255);
  transition: none;
}
.input_danger {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(255, 180, 180);
}

.input_disabled {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(177, 177, 177);
}
.input_disabled:focus {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(177, 177, 177);
}

</style>

<template>
<aboveComponent 
id='el'
@change="func"
:disabled="true"
/>
</template>

<script>
methods(){
func(){
document.getElementbyID('el').disabled = false
}
</script>

{{label}}
从“../../pages/Transformation.vue”导入TransformationVue；
导出默认值{
道具：{
值：[数字，字符串]，
id:String，
标签：字符串，
民:号码,，
马克斯：号码，
类型：字符串，
状态：布尔，
占位符：[数字，字符串]，
伊斯丹格：{
类型：布尔型，
默认值：false
},
残疾人士：{
类型：布尔型，
默认值：false
},
宽度：{
类型：字符串，
默认值：“100%”
}
},
数据（）{
返回{
明瓦尔：这个，明，
};
},
观察：{
已禁用：函数（）{
警报（“你好”）
}
},
计算：{
isSuccess:函数（）{
if（this.isDanger==false&&this.disabled==false）{
返回真值
}否则{
返回错误
}
},
isDisabled:函数（）{
if（this.disabled==true）{
返回真值
}否则{
返回错误
}
}
},
方法：{
手动输入（e）{
这是.$emit（“输入”，即目标值）；
},
更改（e）{
如果（this.type=='number'）{
如果（e.target.value this.max）{
this.$emit（“输入”，this.minVal）
this.$toast.error（“超出范围！”，允许的范围是“+this.min+”到“+this.max，{timeout:6000}”）；
}否则{
此。$emit（“更改”）
}
}否则{
本。$emit（“变更”）；
}
},
},
};
.输入{
字体大小：14px；
高度：40px；
边框：1px纯白；
边界半径：4px；
边框底部：4px实心#116b9d；
}
.输入：悬停{
边框底部：4px实心#93d9ff；
背景：rgb（255、255、255）；
过渡：无；
}
.输入：焦点{
边框底部：4px实心#93d9ff；
背景：rgb（255、255、255）；
过渡：无；
}
.输入危险信息{
字体大小：14px；
高度：40px；
边框：1px纯白；
边界半径：4px；
边框底部：4倍实心rgb（255、180、180）；
}
.input_已禁用{
字体大小：14px；
高度：40px；
边框：1px纯白；
边界半径：4px；
边框底部：4倍实心rgb（177177177177）；
}
.input_已禁用：焦点{
字体大小：14px；
高度：40px；
边框：1px纯白；
边界半径：4px；
边框底部：4倍实心rgb（177177177177）；
}

在vue页面中，我使用了以下组件：

<template>
  <div>
    <span style="font-size: 16px">{{label}}</span>
    <!-- <label style="font-size: 15px">{{ label }}</label> -->
    <input
      :class="{input:isSuccess, input_danger:isDanger, input_disabled:isDisabled}"
      :style="{width:width}"
      :id="id"
      :type="type"
      :max="max"
      :min="min"
      :state="state"
      :placeholder="placeholder"
      :disabled="disabled"
      :value="value"
      @input="handleInput"
      @change="change"
    />
  </div>
</template>

<script>
import TransformationVue from '../../pages/Transformation.vue';
export default {
  props: {
    value: [Number, String],
    id: String,
    label: String,
    min: Number,
    max: Number,
    type: String,
    state: Boolean,
    placeholder: [Number, String],
    isDanger:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:'100%'
    }
  },
  data() {
    return {
      minVal:this.min,
      
    };
  },
  watch:{
    disabled:function(){
      alert('hello')
    }
  },
  computed:{
    isSuccess:function(){
      if(this.isDanger == false && this.disabled == false ){
        return true
      }else {
        return false
      }
    },
    isDisabled:function(){
      if(this.disabled ==true){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    change(e) {
      if(this.type == 'number'){
        if(e.target.value<this.min || e.target.value > this.max){
          this.$emit("input", this.minVal)
          this.$toast.error("Out of range!, Allowed range is "+this.min+" to" + this.max, { timeout: 6000 });
        }else{
          this.$emit("change")
        }
      }else{
      this.$emit("change");
      }
    },
  },
};
</script>
<style scoped>

.input {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid #116b9d;
}
.input:hover {
  border-bottom:4px solid #93d9ff;
  background:rgb(255, 255, 255);
  transition: none;
}
.input:focus {
  border-bottom:4px solid #93d9ff;
  background:rgb(255, 255, 255);
  transition: none;
}
.input_danger {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(255, 180, 180);
}

.input_disabled {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(177, 177, 177);
}
.input_disabled:focus {
  font-size: 14px;
  height: 40px;
  border: 1px solid white;
  border-radius: 4px;
  border-bottom:4px solid rgb(177, 177, 177);
}

</style>

<template>
<aboveComponent 
id='el'
@change="func"
:disabled="true"
/>
</template>

<script>
methods(){
func(){
document.getElementbyID('el').disabled = false
}
</script>

方法（）{
func（）{
document.getElementbyID（'el'）.disabled=false
}

当我直接使用disabled作为true或false时，组件样式正在更新，

---

但是，当我使用document.getElementById更改disabled属性时，禁用功能正在工作，但组件样式没有更新。

如果您在vue中使用document.getElementById，您可能需要学习vue的更多内容，尤其是在需要访问DOM的情况下使用子组件。但在这种情况下，您不需要。使用t他禁用了绑定禁用的绑定解决了问题