Vue项目中使用继承extends实现复用代码

简介: Vue项目中使用继承extends实现复用代码

parent.vue

定义了1个方法和2个数据


<template>
  <div class="">
      这是父组件
      {{message}}
  </div>
</template>
<script>
export default {
  name: 'Parent',
  data() { 
    return {
        message: "Hello Vue",
        sayHello: "Parent say hello"
    }
  },
  methods:{
      showMessage(){
          alert(this.sayHello + this.message);
      }
  },
 }
</script>

child.vue

继承父组件,使用父组件中的方法,并覆写父组件中的数据


<template>
  <div class="">
      这是子组件
      {{message}}
      <button @click="showMessage">点击</button>        
  </div>
</template>
<script>
import Parent from "./Parent.vue";
export default {
  name: 'Child',
  extends: Parent,
  data(){
      return{
          sayHello: "Child say hello"
      }
  }
 }
</script>

about.vue

调用child组件


<template>
  <div class="about">
    <h1>这是about</h1>
    <Child/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "About",
  components:{
    Child
    },
}
</script>

实现效果,父组件的方法取得了子组件覆写过的数据


image.png

相关文章
|
3天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
7天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
10天前
|
JavaScript
|
9天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
12天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
26 4
|
12天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
20 1
|
12天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
30 1
|
12天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6
|
17天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
25 1
|
12天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
49 0