草庐IT

Vue组件的继承用法

mochenxiya 2023-03-28 原文

Vue组件的继承用法

点击打开视频讲解

vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据

基类案例：

<template>
  <div class="hello">
    父类:{{name}}
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      name:'末晨曦吖',
      title:'Vue组件的继承用法'
    }
  },
  mounted(){
    console.log('父组件',this.name);
  },
  methods:{
    handle(){
      console.log('我是父组件方法');
    }
  }
}
</script>

<style scoped>

</style>

继承基类案例：

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  extends:HelloWorld,
  data(){
    return {
      
    } 
  },
  mounted() {
    console.log("子类继承父组件name", this.name);
    this.handle()
    // this.title = '子组件更改了title'
  },
  components:{
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
 
</style>

效果：

可以看见，不改写基类的时候，继承了父类的所有东西，当前的data，dom，方法都继承了

改写父类案例：

<template>
  <div id="app">
    子组件：{{name}}
    <span>{{title}}</span>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  extends:HelloWorld,
  data(){
    return {
      
    } 
  },
  mounted() {
    console.log("子类继承父组件name", this.name);
    this.handle()
    this.name = '子组件更改了name'
    this.title = '子组件更改了title'
  },
  components:{
    
  },
  methods:{
    handle(){
      console.log('子组件改写方法');
    }
  }
}
</script>

<style scoped>
 
</style>

效果：

我们会发现，改写后基类的值也被覆写了，方法也被覆写了，html模板也完全被改写了

HTML模板要么完全继承，要么完全重写，不能按需继承某个部分。如果子类在结构上跟基类有所差异，还是需要在基类中做条件判断。如果模板差异太大，可以重新定义子类自己的template，至少还可以重用一部分业务逻辑代码。

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！

用法Vuestrongnamegt

有关Vue组件的继承用法的更多相关文章

  1. ruby-on-rails - Rails 单表继承 : How to override the value written to the type field - 2

    在我的系统中，我已经定义了STI。Dog继承自Animal，在animals表中有一个type列，其值为"Dog"。现在我想让SpecialDog继承自dog，只是为了在某些特殊情况下稍微修改一下行为。数据还是一样。我需要通过SpecialDog运行的所有查询，以返回数据库中类型为Dog的值。我的问题是因为我有一个type列，rails将WHERE"animals"."type"IN('SpecialDog')附加到我的查询中，所以我不能获取原始的Dog条目。所以我想要的是以某种方式覆盖rails在通过SpecialDog访问数据库时使用的值，使其表现得像Dog。有没有办法覆盖用于类型

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. ruby-on-rails - 为什么 DataMapper 使用混合与继承？ - 2

    所以我只是对此感到好奇:DataMapper为其模型使用混合classPostincludeDataMapper::Resource虽然active-record使用继承classPost有谁知道为什么DataMapper选择这样做(或者为什么AR选择不这样做)？ 最佳答案 它允许您从另一个不是DM类的类继承。它还允许动态地将DM功能添加到类中。这是我正在处理的模块中的类方法:defdatamapper_classklass=self.dupklass.send(:include,DataMapper::Resource)klass

  4. ruby - 有人可以解释一下在 Ruby 中注入(inject)的真实、通俗易懂的用法吗？ - 2

    我正在学习Ruby，遇到了inject。我正处于理解它的风口浪尖，但当我是那种需要真实世界的例子来学习一些东西的人时。我遇到的最常见的例子是人们使用inject来添加一个(1..10)范围的总和，我不太关心这个。这是一个任意的例子。在实际程序中我会用它做什么？我正在学习，所以我可以继续使用Rails，但我不必有一个以Web为中心的示例。我只需要一些我可以全神贯注的目标。谢谢大家。 最佳答案 inject有时可以通过它的“其他”名称reduce更好地理解。它是一个对Enumerable进行操作(迭代一次)并返回单个值的函数。它有许多有

  5. ruby-on-rails - Ruby on Rails 单表继承(STI)和单元测试问题(使用 PostgreSQL) - 2

    我正在使用带有单个“帐户”表的STI模型来保存用户和技术人员的信息(即用户...8)错误:test_the_truth(用户测试):ActiveRecord::StatementInvalid:PGError:ERROR:关系“技术人员”不存在:从“技术人员”中删除...从本质上讲，标准框架不承认Technicians和Users表(或PostgreSQL称它们为“关系”)不存在，事实上，应该别名为Accounts。有什么想法吗？我对RoR比较陌生，不知道如何解决这个问题而又不完全删除STI。 最佳答案 原来问题是由于存在:./te

  6. ruby - 为什么 Ruby 模块继承不像类继承那样工作？ - 2

    假设我有一个名为Flight的模块，其中包含类方法和实例方法。我可以使用include、extend或两者将其方法放入类中:classBatinclude会将Flight添加到Bat.ancestors，但extend不会。我的问题是，为什么模块与类不同？当我对Mammal进行子类化时，我总是同时获得类和实例方法。然而，当我混入一个模块时，我不能同时获得类和实例方法(除非我使用self.included钩子(Hook)或类似ActiveSupport::Concern的东西)。这种差异背后是否存在语言设计问题？ 最佳答案 Modul

  7. ruby - 为什么 Object 在 Ruby 中既包含内核又继承它？ - 2

    在Ruby(1.8.X)中为什么Object既继承了内核又包含了内核？仅仅继承还不够吗？irb(main):006:0>Object.ancestors=>[Object,Kernel]irb(main):005:0>Object.included_modules=>[Kernel]irb(main):011:0>Object.superclass=>nil请注意，在Ruby1.9中情况类似(但更简洁):irb(main):001:0>Object.ancestors=>[Object,Kernel,BasicObject]irb(main):002:0>Object.included

  8. ruby - 使用法拉第上传文件 - 2

    我在尝试使用Faraday将文件上传到网络服务时遇到问题。我的代码:conn=Faraday.new('http://myapi')do|f|f.request:multipartendpayload={:file=>Faraday::UploadIO.new('...','image/jpeg')}conn.post('/',payload)尝试发布后似乎没有任何反应。当我检查响应时this是我所看到的:#:post,:body=>#,#,@opts={}>,#],@index=0>>,#>],@ios=[#,#,@opts={}>,#],@index=0>,#],@index=0>

  9. ruby - rspec: raise_error 用法来匹配错误信息 - 2

    我使用raise(ConfigurationError.new(msg))引发错误我试着用rspec测试一下:expect{Base.configuration.username}.toraise_error(ConfigurationError,message)但这行不通。我该如何测试呢？目标是匹配message。 最佳答案 您可以使用正则表达式匹配错误消息:it{expect{Foo.bar}.toraise_error(NoMethodError,/private/)}这将检查NoMethodError是否由privateme

  10. Ruby 获取继承类 - 2

    我正在为Rails创建我的第一个插件。我对ruby​​还是很陌生，我想知道是否有可能获得继承类？例如，我正在尝试创建一个插件，在您不使用迁移时允许进行单元测试和功能测试。我要做的是初始化一个名为controller的类变量，以初始化为正在测试的Controller类型。如果我有一个基类ControllerTest:classControllerTest所以我目前坚持的是获取继承类的名称。这可能吗？如果没有，有没有人知道我可以如何着手实现它的另一种方式？提前致谢。 最佳答案 非常简单:使用“继承”回调。来自Class类的RDoc:in

随机推荐