如何设置一个属性类来扩展 Vue JS 项目中的所有组件？答案

【问题标题】：How to setup a property class to extend on all components on VueJS project?如何设置一个属性类来扩展 Vue JS 项目中的所有组件？
【发布时间】：2021-10-30 02:56:12
【问题描述】：

我在我的 VueJS 项目中使用 Vuetify，几个组件的文本都是大写的，我需要在我想要的每个组件上设置 class="text-none" 属性。那么，我怎样才能将这个属性扩展到所有组件或细节呢？

我使用属性类时的一些例子。

<v-tab class="text-none" key="meetingsListTab">Reuniões</v-tab>

<v-btn @click="onClickBack" text class="text-none grey--text">
<span class="material-icons"> arrow_back </span> Voltar
</v-btn>

<v-btn
@click="onClickDeleteMeeting"
outlined
color="red lighten-1"
class="text-none mr-4">
Deletar reunião
</v-btn>

【问题讨论】：

标签： html css vue.js vuetify.js

【解决方案1】：

我会发出一个全局事件并让所有相关组件监听它。

// button function
function deleteHandler() {
  this.$root.$emit('<meeting-id>', {action: 'delete'})
}

// on your-component
{
  props: {
    meetingId: {
      type: String,
      default: 'meeting-id'
    }  
  }
  data: {
    noText: ''
  },
  mounted() {
    this.$root.$on(this.meetingId, (payload) => {
      if(payload.action === 'delete') this.setNoTextClass
    }
  }
}

在您的 HTML 中

<your-component 
  :class="[noText, 'grey--text']" 
  key="meetingsListTab">
Reuniões
</your-component>

参考资料：

【讨论】：

我能回答你的问题吗？