精华内容
下载资源
问答
  • 背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法直接return 接口调用的结果export function getall() {let all = [];let opt = {method: 'get',url: 'all/teacher',success: res => {...

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法

    直接return 接口调用的结果

    export function getall() {

    let all = [];

    let opt = {

    method: 'get',

    url: 'all/teacher',

    success: res => {

    all = res.data.value || [];

    },

    fail: err => {

    tipinfo(err.data.desc, '提示', false, 'warning');

    }

    };

    $http(opt);

    return all;

    }

    console.log(getall()); // []

    $http是在axios基础 进行封装的,是一个异步的方法,所以在组件中调用getall()方法,拿到的是一个空数组

    使用promise进行封装

    export function getall() {

    return new promise((resolve, reject) => {

    let opt = {

    method: 'get',

    url: 'all/teacher',

    success: res => {

    resolve(res.data.value || []);

    },

    fail: err => {

    reject(err.data.desc);

    }

    };

    $http(opt);

    });

    }

    // 调用

    getall()

    .then(data => {

    console.log(data); //

    })

    .catch(err => {

    this.tipinfo(err.data.desc, '提示', false, 'warning');

    });

    使用promise进行封装后,方法,不够简洁,达不到优化的目的

    使用回调函数进行封装

    export function getall(callback) {

    let opt = {

    method: 'get',

    url: 'all/teacher',

    success: res => {

    callback(res.data.value || []);

    },

    fail: err => {

    tipinfo(err.data.desc, '提示', false, 'warning');

    }

    };

    $http(opt);

    }

    // 调用

    getallpark(data => {

    console.log(data); // 成功拿到数据

    });

    补充知识:vue多个页面用到同一个接口的数据( 比如名称列表 ),使用 vuex

    第一种: 调接口不传参数

    1、在 store文件夹下的 modules文件夹下新建 getname.js

    // getname.js

    import { getnamelist } from "@/apis/apis"; // 导入接口

    export default {

    state: {

    namelist: [] // 名称列表

    },

    mutations: {

    changenamelist(state, payload) {

    state.namelist= payload;

    }

    },

    actions: {

    gename(context) {

    getnamelist ({}).then(res => {

    if (res.code == 0) {

    context.commit("changenamelist", res.data);

    } else {

    message.error(res.message);

    }

    });

    }

    }

    };

    2、在 store文件夹下 index.js 中引入 getname.js

    import getnamefrom "./modules/getname";

    export default new vuex.store({

    modules: {

    getname

    },

    });

    3、在整个项目刚开始加载的时候就是用 dispatch 分发,这样就不管在哪个页面需要使用到都可以使用

    比如打开页面首页的时候,在mounted里面就 dispatch 触发gename函数

    export default {

    mounted() {

    this.$store.dispatch('gename')

    },

    }

    4、如在多个页面都需要使用 namelist , 以在某一个页面使用为例,其余页面一样用法

    export default {

    computed: {

    namelist() {

    return this.$store.state.getname.namelist

    }

    },

    }

    第二种: 调接口传参数

    import movieservice from '../services/movieservice.js'

    export default {

    namespaced: true,

    state: {

    current: 1,

    pagesize: 2,

    total: 0,

    datas: [],

    isloading: false

    },

    mutations: { //改变状态的通用方法 设置整个状态

    setstate(state, newstate) {

    for (const prop in newstate) {

    state[prop] = newstate[prop]

    }

    }

    },

    actions: {

    fetch(context) { // 根据当前的分页设置,获取电影

    context.commit("setstate", { isloading: true })

    movieservice.getmovies(context.state.current, context.state.pagesize).then(resp => {

    console.log(resp)

    context.commit("setstate", resp)

    context.commit("setstate", { isloading: false })

    })

    }

    }

    }

    // 在 movieservice.js

    export default {

    async getmovies(page, pagesize) {

    const datas = await fetch("https://api.myjson.com/bins/15f8x1")

    .then(resp => resp.json())

    return {

    total: datas.length,

    datas: datas.slice((page - 1) * pagesize, page * pagesize) //返回分页的电影数据

    }

    },

    //通过id获取电影数据

    async getmovie(id) {

    const datas = await fetch("https://api.myjson.com/bins/15f8x1")

    .then(resp => resp.json())

    return datas.find(item => item._id === id)

    }

    }

    在页面使用:

    mounted() { //远程获取数据

    this.$store.dispatch("movie/fetch") //出发vuex中movie.js里的action,获取数据

    },

    以上这篇vue之封装多个组件调用同一接口的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。

    希望与广大网友互动??

    点此进行留言吧!

    展开全文
  • 开发通用组件是很基础且重要的工作,通用组件必须具备高性能、低耦合的特性、数据从父组件传入为了解耦,子组件本身就不能生成数据。即使生成了,也只能在组件内部运作,不能传递出去。父对子传参,就需要用到 ...

    开发通用组件是很基础且重要的工作,通用组件必须具备高性能、低耦合的特性

    一、数据从父组件传入

    为了解耦,子组件本身就不能生成数据。即使生成了,也只能在组件内部运作,不能传递出去。

    父对子传参,就需要用到 props,但是通用组件的的应用场景比较复杂,对 props 传递的参数应该添加一些验证规则

    二、在父组件处理事件

    在通用组件中,通常会需要有各种事件,

    比如复选框的 change 事件,或者组件中某个按钮的 click 事件

    这些事件的处理方法应当尽量放到父组件中,通用组件本身只作为一个中转

    三、记得留一个 slot

    一个通用组件,往往不能够完美的适应所有应用场景

    所以在封装组件的时候,只需要完成组件 80% 的功能,剩下的 20% 让父组件通过 solt 解决

    四、不要依赖 Vuex

    父子组件之间是通过 props 和 自定义事件 来传参,非父子组件通常会采用 Vuex 传参

    但是 Vuex 的设计初衷是用来管理组件状态,虽然可以用来传参,但并不推荐

    因为 Vuex 类似于一个全局变量,会一直占用内存

    在写入数据庞大的 state 的时候,就会产生内存泄露

    五、合理运用 scoped 编写 CSS

    在编写组件的时候,可以在

    但是一味的使用 scoped,肯定会产生大量的重复代码

    所以在开发的时候,应该避免在组件中写样式

    当全局样式写好之后,再针对每个组件,通过 scoped 属性添加组件样式

    展开全文
  • date: 2017-12-03 10:40:49tags:背景上篇介绍了如何封装一个react全局组件,这篇介绍下vue如何封装一个全局组件。思路通过Vue.extend(options),使用基础 Vue 构造器,创建一个子类,再创建这个子类的实例,挂载到...

    date: 2017-12-03 10:40:49

    tags:

    背景

    上篇介绍了如何封装一个react全局组件,这篇介绍下vue如何封装一个全局组件。

    思路

    通过Vue.extend(options),使用基础 Vue 构造器,创建一个子类,再创建这个子类的实例,挂载到body元素上。具体看代码注释。

    代码

    index.js

    import Vue from 'vue';

    import Loading from './loading';

    // 创建一个“子类”

    let LoadingC = Vue.extend(Loading);

    let instance;

    export default {

    open (options = {}) {

    if (!instance) {

    this.initInstance(options);

    }

    instance.visible = true;

    },

    initInstance (options) {

    // 创建子类实例

    instance = new LoadingC({

    el: document.createElement('div')

    });

    // 传入属性

    instance.text = options.text || '加载中';

    for (var prop in options) {

    if (options.hasOwnProperty(prop)) {

    instance[prop] = options[prop];

    }

    }

    // 插到body里

    document.body.appendChild(instance.$el);

    Vue.nextTick(() => {

    instance.visible = true;

    });

    },

    close () {

    instance.visible = false;

    }

    };

    loading.vue

    {{ text }}

    export default {

    props: {

    text: {

    type: String,

    default: ''

    }

    },

    data () {

    return {

    visible: true

    };

    },

    created () {

    }

    };

    .loading{

    transition: opacity .3s linear;

    width: 100%;

    height: 100%;

    position: fixed;

    display: block;

    text-align: center;

    top: 0;

    background-color: transparent;//背景透明

    z-index: 9999;

    &:after{

    content: "";

    display: inline-block;

    }

    }

    .loading-mask{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .2);

    }

    .loading-outter {

    position: relative;

    top: 50%;

    margin-top: -0.35rem;

    display: inline-block;

    vertical-align: middle;

    background-color: #222;

    border-radius: .5rem;

    height: .75rem;

    }

    .loading-wrap {

    position: absolute;

    width: .56rem;

    height: .56rem;

    top: .094rem;

    left: .09rem

    }

    .loading-ring {

    width: .56rem;

    height: .56rem;

    background-image: url("../../../assets/images/loading.svg");

    background-size: cover;

    position: absolute;

    }

    .loading-rect {

    height: .18rem;

    width: .18rem;

    background-color: #FD404A;

    border-radius: .05rem;

    -webkit-transform: rotate3D(0, 0, 1, 45deg);

    position: absolute;

    left: .28rem;

    top: .28rem;

    }

    .loading-text {

    text-align: left;

    color: #fff;

    font-size: .24rem;

    font-family: sans-serif;

    line-height: .75rem;

    padding-left: .85rem;

    padding-right: .26rem;

    }

    .loading-enter,

    .loading-leave-active {

    opacity: 0;

    }

    展开全文
  • 前言:把一个功能模块使用组件化的思想充分封装,如导航栏,这无论对我们的开发思想还是效率都有许多好处,在开发中,我们要尽量多得运用组件化的开发思想,不要把所有代码都写在同一个.vue文件中,这样能大大提高...

    前言:把一个功能模块使用组件化的思想充分封装,如导航栏,这无论对我们的开发思想还是效率都有许多好处,在开发中,我们要尽量多得运用组件化的开发思想,不要把所有代码都写在同一个.vue文件中,这样能大大提高代码的可读性。

    封装导航栏

    在这里插入图片描述
    主要思路:把红色的部分当成一个个组件,而他们只是图片和文字不同,所以我们可以把他们封装成同一个组件,然后向组件里传入图片信息和文字信息即可(可以用插槽)。

    //TabBarItem.vue
    <template>
      <div class="tabBarItem" @click="tabBarItemClick">
        <div v-if="!isActive">
          <slot name="item-icon"></slot>
        </div>
        <div v-else>
          <slot name="item-icon-active"></slot>
        </div>
        <div :style="isActiveColor">
          <slot name="item-text"></slot>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name:"TabBarItem",
      props:{
        path:String,
        activeColor:{
          type:String,
          default:"pink"
        }
      },
      computed:{
        isActive:{
          get(){
            return this.$route.path.indexOf(this.path)!==-1;
          },
          set(){}
        },
        isActiveColor(){
          return this.isActive?{color:this.activeColor}:{}
        }
      },
      methods:{
        tabBarItemClick(){
          this.$router.push(this.path);
        }
      }
    }
    </script>
    
    <style scoped>
    .tabBarItem{
      flex: 1;
      font-size: 12px;
    }
    .tabBarItem img{
      margin-top: 3px;
      width: 24px;
      padding-bottom:3px ;
    }
    </style>
    
    

    接下来就是封装一个把这4个选项放在同一个地方的容器。

    //TabBar.vue
    <template>
      <div class="tabBar">
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      name:"TabBar"
    }
    </script>
    
    <style scoped>
    .tabBar{
      display: flex;
      height: 49px;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      box-shadow: 0px -1px 1px rgba(100, 100, 100, .1);
      background-color: #f6f6f6;
    }
    
    </style>
    

    再接下来就是使用了,给每一个不同的TabBarItem的插槽写入不同的图片和文字信息。

    //MainTabBar.vue
    <template>
      <div class="mainTabBar">
        <tab-bar>
          <tab-bar-item path="/home" activeColor="#ff8198">
            <img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">
            <img src="~assets/img/tabbar/home_active.svg" alt="" slot="item-icon-active">
            <div slot="item-text">首页</div>
          </tab-bar-item>
          <tab-bar-item path="/category" activeColor="#ff8198">
            <img src="~assets/img/tabbar/category.svg" alt="" slot="item-icon">
            <img src="~assets/img/tabbar/category_active.svg" alt="" slot="item-icon-active">
            <div slot="item-text">分类</div>
          </tab-bar-item>
          <tab-bar-item path="/cart" activeColor="#ff8198">
            <img src="~assets/img/tabbar/shopcart.svg" alt="" slot="item-icon">
            <img src="~assets/img/tabbar/shopcart_active.svg" alt="" slot="item-icon-active">
            <div slot="item-text">购物车</div>
          </tab-bar-item>
          <tab-bar-item path="/profile" activeColor="#ff8198">
            <img src="~assets/img/tabbar/profile.svg" alt="" slot="item-icon">
            <img src="~assets/img/tabbar/profile_active.svg" alt="" slot="item-icon-active">
            <div slot="item-text">我的</div>
          </tab-bar-item>
        </tab-bar>
      </div>
    </template>
    
    <script>
    import TabBar from "components/common/tabbar/TabBar"
    import TabBarItem from "components/content/tabbar/TabBarItem"
    export default {
      name:"MainTabBar",
      components:{
        TabBar,
        TabBarItem
      }
    }
    
    </script>
    <style>
    
    </style>
    
    

    导航栏一般都在主页中使用,所以我们把这个导航栏放在App.vue

    <template>
      <div id="app">
        <main-tab-bar></main-tab-bar>
      </div>
    </template>
    
    <script>
    import MainTabBar from "components/content/tabbar/MainTabBar";
    export default {
      name: 'App',
      components:{
        MainTabBar
      }
    }
    

    总结:这样看来,我们写一个导航栏用了3个文件,这可能看起来是麻烦的,但这也大大提高了代码的可读性,如果我们还需要在该项目别的地方使用导航栏,我们只需要直接创建一个MainTabBar类似的文件,然后把你要的图片和文字写进入即可,甚至于在别的项目用到时,我们可以直接将文件拷贝过去就能够直接使用,连CSS样式都不需要我们去写,这就大大提高了我们的开发效率。

    展开全文
  • 搜索热词1.首先写好里面的模板及传递过来的参数2...在main.js里面引入 然后vue.use(引入的名称)Vue封装一个js引用Vue封装的js里面可以是个对象 也可以是方法export 和 export default的区别是 在一个页面中 export可...
  • vue封装全局组件

    2020-12-29 07:47:33
    首先写是需要封装组件NavBarTitle.vueleft-arrow@click-left="onClickLeft">{{NavBarTitle}}.NavBarTitle .van-nav-bar__text,.van-nav-bar .van-icon{color:#333333;}.NavBarTitle /deep/ .van-nav-bar__title...
  • Vue封装input公共组件

    2021-09-06 15:17:48
    Vue封装input公共组件 最近呢有一个需求是很多个表单添加 编辑等操作 会用到很多input输入框 所以就想把input进行简单封装 提高一些复用率减少一些代码量 因封装没什么难度性 故直接贴上代码 做一些简单的注释 <...
  • vue封装高级组件

    2021-05-14 11:52:21
    文章目录v-model勾选框组件输入框组件按钮组件地址联动自定义组件 v-model 在自定义组件上使用v-model进行数据的双向绑定 勾选框组件 //调用时 checkbox=false <check-box v-model="checkbox" ></check-...
  • width: '86' }, { title: '作者', key: 'AUTHOR_TRUENAME', width: '86' }, { title: '修改时间', key: 'OPERTIME', width: '154' } ] }), methods: { evil (code) { let Fn = Function // 一个变量指向Function,...
  • Vue封装table组件

    2020-12-30 19:13:44
    Vue封装table组件,业务需求不同,封装的table也不一样↓↓↓ <!--公用table组件--> <template> <div class="commonTableOut"> <el-table class="commonTable" :height="height" :data=...
  • 1.新建一个组件命名命名为alertBox.vue一.dom结构提示{{Message}}否是二.scriptexport default {props: ["isshowAlert", "Message"],data() {return {isShowDialogs: true};},methods: {isShowRefruct() {this....
  • 组件使用的方式不够便利,封装成工具函数方式。 大致实现步骤: 先把布局,和三种情况的显示,完成。 定义组件:src/components/library/message.vue <template> <transition name='down'> <...
  • 目录vue封装一个 弹窗组件 dialog使用dialog组件 Home.vue vue封装一个 弹窗组件 dialog 实现效果: 点击按钮,弹窗显示出来 点击关闭 || 取消 || 确定 弹窗隐藏 弹出时候带着遮罩层以及过渡动画效果 关闭...
  • vue封装进度条组件

    2021-11-15 14:58:55
    组件封装 components/progress.vue <template> <div class="process-father" :class="{'addGray':addGray}" > <div class="process-child" ref="processChild"> <p class="process-...
  • vue封装一个全局使用的组件
  • vue 封装组件

    2021-02-03 14:19:48
    -- 这是一个公共组件 --> <template> <div>这是一个公共组件内容</div> </template> <script> export default { name:"List", data () { return { }; }, methods: {} } ...
  • vue组件封装指南

    2020-12-29 07:47:32
    目录vue组件三要素props参数slot定制插槽event自定义事件基本用法在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 template 中写好 HTML 代码,一个简单的组件就完成了一个完整...
  • vue一步一步带你封装一个按钮组件

    千次阅读 多人点赞 2021-07-16 21:45:34
    本文主要对子组件封装一个了解 首先我们直接看一下代码显示 首先是今天有一个学妹 过来问我如何封装组件 # 实现效果 首先这个组件是基于eleemnt-ui进行封装的 我们看一眼实现效果 有了实现效果 之后 我们...
  • vue封装组件3种方式

    2021-07-26 21:36:18
    3、npm package(目前两种:a、不打包可以有多个组件, b、打包的话只能有一个组件?) 在http://www.npmjs.com注册一个账号 进入common的控制台,输入命令npm login,按照提示输入刚注册的账号密码 输入命令 npm ...
  • vue封装全局提示组件

    2021-05-15 15:39:48
    由于现有组件的提示框样式无法满足UI的要求,所以自己封装一个全局提示框, 效果如下 1.首先写一个vue组件 <template> <!-- 全局提示框 --> <transition > <div v-show="visible" class="myNotifyComponent"> ...
  • Vue自定义封装组件

    2021-03-01 21:28:05
    Vue自定义封装组件 1.在components文件夹下创建一个自定义组件名称的Vue文件,对组件进行相应的布局,添加样式,在script标签中的Vue实例下添加props对象,用来接收动态属性并设置其数据类型,例 props:{ title : ...
  • vue封装组件使用插槽

    2021-12-14 12:14:39
    封装一个组件后, 内部有一些地方待定功能暴露给外界来写。 就好比于el-table中的单个表格内部可能是下拉框,或者是一些文本输入。 需要用template来嵌套使用 子组件 <template> <div> <div v-...
  • Vue 组件封装 封装的意义 当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件...如上的例子,封装的组件需要图标、名字、描述等值,这些值需要在引用的页面传入封装组件。 首先在export default里面
  • vue组件封装

    2021-02-25 18:31:12
    1、封装组件的目的 把业务逻辑相同,高度重复的代码封装起来,为了提高代码的复用,减少代码的冗余。 2、组件使用 (1)引用 import navs from '@/views/nav/index' (2)注册 components:{ 'v-nav':navs } (3)...
  • vue -封装一个弹出层组件组件之间的通信)

    千次阅读 多人点赞 2021-09-27 09:40:37
    系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第章 Python 机器学习入门之pandas的使用 提示:写完文章后,目录可以自动生成...首先组件是可复用的实例,当我们封装好了
  • 移动端vue封装轮播图组件 假设我们需要实现一个有四张图片的轮播图 1. 实现思路 将拿到的图片布局好 要实现轮播就要让图片有规律的动起来 2. 实现步骤 第一步:封装组件 组件可以提高模块功能的复用性,当我们...
  • Vue 弹出框组件的完整封装过程

    千次阅读 2020-12-23 09:04:58
    引言因为项目搬砖需要,笔者从 2019 年 11 月份...写作本文有两个原因,一是对这段时间学习 Vue.js 的过程做一个总结;另外就是完成自己 2019 下半年在 GitChat 的写作目标,8 月份曾在一个知识星球公布了下半年写...
  • Vue封装单文件组件

    2021-02-06 13:47:43
    Vue中我们会经常遇到一个页面,数据过多,为了简便一般会把内容封装在引入页面,详情如下: 1、一般在:components下新建一些目录:目录下新建vue文件:写入我们要实现的功能,内容和平时页面一样,可以先将页面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,105
精华内容 23,242
关键字:

vue如何封装一个组件

vue 订阅