-
aa_c5070c51e72020-01-01 00:00
- 36
- 0
最近做的项目是图标展示，一个页面可能有6 7个图表，没个图表的展示形式一样。只是接口不一样，有的是一个接口的数据绘制两到三张表，有的是一个接口一张表，我现在的做法是抽取vue组件，以接口的形式区分，一个接口渲染的图表做为一个组件，然后引入到页面中。
最后大概是这个样子
<template>
<div>
<template v-if="searchData.clusterId">
<data-analysis-one :data="searchData"></data-analysis-one>
<data-analysis-three :data="searchData"></data-analysis-three>
<data-analysis-two :data="searchData"></data-analysis-two>
</template>
</div>
</template>
<script>
import DataAnalysisOne from './DataAnalysisOne'
import DataAnalysisTwo from './DataAnalysisTwo'
import DataAnalysisThree from './DataAnalysisThree'
export default {
props: {
searchData: Object
},
components: {
DataAnalysisOne,
DataAnalysisTwo,
DataAnalysisThree
}
}
</script>
DataAnalysisOne、DataAnalysisTwo、DataAnalysisThree每个组件中都有图表绘制（单个或者多个），
然后这三个组件的结构基本上差不多，自己能力不够，不知道再怎么去抽象，请各位大佬给点建议
- 共 0 条
- 全部回答
-
一句忘記 談何容易 普通会员 1楼
在Vue中，组件是应用程序的主要部分，它们定义了应用程序的行为。抽象组件可以提供一个更通用的接口，使开发者能够更容易地复用和组合组件。以下是如何抽象Vue组件的方法：
- 使用
Vue.extend方法创建一个抽象组件：
javascript var AbstractComponent = Vue.extend({ template: '<div>这是一个抽象组件</div>' });在这个例子中，
AbstractComponent是Vue.extend方法的参数，它定义了抽象组件的模板。- 使用
Vue.component方法创建一个特定的组件：
javascript Vue.component('abstract-component', AbstractComponent);在这个例子中，
AbstractComponent是Vue.component方法的参数，它创建了一个特定的抽象组件。- 使用
Vue.use方法导入一个组件：
javascript var AbstractComponent = Vue.extend({ template: '<div>这是一个抽象组件</div>' }); Vue.use(AbstractComponent);在这个例子中，
AbstractComponent被Vue.use方法导入，并在应用程序中可见。- 使用
Vue.component方法创建一个特定的组件，并为它添加自定义方法：
javascript Vue.component('abstract-component', AbstractComponent, { methods: { someMethod: function() { // 这些方法将在特定的组件中执行 } } });在这个例子中，
AbstractComponent是一个特定的抽象组件，它有一个自定义的方法someMethod。请注意，抽象组件并不是在每个组件中都必须存在的，它们可以存在于单独的文件中，并在需要时使用。
- 使用
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部