Vue组件公用方法提取mixin实现

目录
  • 一.应用场景
  • 二.实现方法
    • 1.提取js共用方法文件
    • 2.引入
  • 三.注意事项

一.应用场景

多个组件共用一个方法时可以用 mixin 抽取到一个js文件中，作为共用方法

二.实现方法

1.提取js共用方法文件

export const common = {
    
    // 组件共用属性 ----------------------------------
    data() {
        return {
            age: 18                    // 设置一个共用属性
        }
    },
    // ---------------------------------------------
    
    // 组件共用方法 ---------------------------------------------
    methods: {
        showName() {
            alert(this.name)          // 弹出组件中name属性的共用方法
        }
    },
    // --------------------------------------------------------
    
    // 组件挂载时的共用方法 ----------------------
    mounted() {
        console.log('初始化方法')    // 挂载时调用
    },
    // ----------------------------------------
    
}

2.引入

<template>
    <div>
        <div>组件</div>
        <button @click="showName">弹出姓名</button>
    </div>
</template>

<script>

    // 引入js文件中的方法对象 --------------------
    import {common, } from '../pub_js/common.js'
    // ----------------------------------------
    
    export default {
        name: 'Student',
        data() {
            return {
                name: '张三'
            }
        },
        
        // 调用 mixin 将组件js与共用js合并 ---
        mixins: [common, ],
        // --------------------------------
        
    }
</script>

三.注意事项

  • 1.data中的属性合并后，如果有命名冲突的情况，以组件中的属性为主，【组件属性覆盖共用js中的属性】
  • 2.methods中的方法合并后，如果有命名冲突的情况，以组件中的方法为主，【组件方法覆盖共用js中的方法】
  • 3.mounted等生命周期方法合并后，会先调用共用js中的的生命周期函数，再调用组件中的生命周期函数，【不会进行覆盖】
  • 4.如果是全局共用的方法，可以直挂载到main.js中↓
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 挂载全局共用方法 -----------------------
import {common, } from 'pub_js/common.js'
Vue.mixin(common)
// --------------------------------------

new Vue({
  render: h => h(App),
}).$mount('#app')

到此这篇关于Vue组件公用方法提取mixin实现的文章就介绍到这了,更多相关Vue组件提取内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现全局组件自动注册,无需再单独引用

    vue实现全局组件自动注册,无需再单独引用

    目录 vue全局组件自动注册 自动化注册全局组件脚本 vue全局组件自动注册 1.在components目录下创建一个global目录,里面放置一些需要全局注册的组件. index.js作用只要是引入main.vue,导出组件对象 2.在components中创建一个index.js,用来扫描全局对象并自动注册. 3.最后在入口文件main.js中导入这个index.js中就可以了 4.直接使用 自动化注册全局组件脚本 今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js

  • vuex如何在非组件中调用mutations方法

    目录 在非组件中调用mutations方法 在组件中调用 在非组件中调用 vuex的mutations属性 mutations属性介绍 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation 在非组件中调用mutations方法 一般情况下调用 mutations.js 中的方法都是在组件中,如果想在非组件中调用,则需要使用如下方式 在组件中调用 import {mapMutations} from 'vuex' impor

  • vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    父组件数据更新子组件相关内容未改变 父组件 在父组件中,根据后台给的数据(数组),v-for生成子组件    <div class="exist">                     <existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click=&q

  • vue全局组件和局部组件的写法介绍

    目录 全局组件和局部组件写法 全局组件引入写法 局部组件引入写法 vue全局/局部组件 全局组件和局部组件写法 vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. 全局组件引入写法 在项目的main.js中: import Vue from 'vue'; import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件   Vue.use(MyComp

  • vue关于this.$refs.tabs.refreshs()刷新组件方式

    vue关于this.$refs.tabs.refreshs()刷新组件方式

    目录 this.$refs.tabs.refreshs()刷新组件 第一种:当前组件刷新 第二种:刷新父组件时 第三种:非关系组件 vue组件重新加载(刷新) 如何刷新当前组件 this.$refs.tabs.refreshs()刷新组件 当更改了用户信息后,需要刷新页面或者组件. 第一种:当前组件刷新 定义一个请求用户信息的方法,在需要时调用: sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo)); //从sessio

  • vue install 注册全局组件方式

    目录 vue install注册全局组件 1.首先先建立一个公用的组件 2.新建一个install.js文件 3.在main.js文件中注册 4.在页面中使用 vue插件的install方法 vue install注册全局组件 项目中的有些组件使用的频率比较高,这时候我们可以注册全局的组件,这样就不用每次使用的组件的时候一次次的导入 具体使用的步骤如下 一般会把这个常用的组件在main.js文件中注册好 1.首先先建立一个公用的组件 // Cmponent.vue 公用的组件 <template

  • Vue组件公用方法提取mixin实现

    Vue组件公用方法提取mixin实现

    目录 一.应用场景 二.实现方法 1.提取js共用方法文件 2.引入 三.注意事项 一.应用场景 多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法 二.实现方法 1.提取js共用方法文件 export const common = {          // 组件共用属性 ----------------------------------     data() {         return {             age: 18              

  • Vue组件化(ref,props, mixin,.插件)详解

    Vue组件化(ref,props, mixin,.插件)详解

    目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo

  • jquery加载单文件vue组件的方法

    本文为大家分享了jquery加载单文件vue组件的方法,供大家参考,具体内容如下 /**注册组件 */ function registerComponent(name){ dm[name] = {}; Vue.component(name + '-component', function(resolve, reject){ $.get('./modules/' + name + '.vue').then(function(rv){ var temp = rv.match(/<template[^

  • bootstrap-table formatter 使用vue组件的方法

    bootstrap-table简介 •1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能.目前在github上已经有2600多个Star,可见其受欢迎程度.其官方网站地址 为:http://bootstrap-table.wenzhixin.net.cn/.里面可以下载使用所需的JS和CSS文件,以及参

  • Vue组件通信方法案例总结

    目录 一.父组件向子组件传值(props) 二.子组件向父组件传值($emit) 三.兄弟组件传值(EventBus) 1. 初始化(new Vue()) 2. 发送事件($emit()) 3. 接收事件($on()) 4. 移除事件监听者 四.Vuex 一.父组件向子组件传值(props) 步骤: 在父组件中通过 v-bind 将数据传给子组件 在子组件中通过 props 接收父组件传递过来的数据 <div id="app"> <!-- 1.通过 v-bind 将数

  • 详解利用jsx写vue组件的方法示例

    前言 本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧. 我们平常写vue的组件时,一般都是用的是模版,这种方式看起来比较简洁,而且vue作者也推荐使用这个方式,但是这种方式也有一些它的弊端,例如模版调试麻烦,或者在一些场景下模版描述可能没那么简单和方便. 下面我们要讲的是如何在vue里面写jsx,知道react的人应该都知道jsx,jsx的一个特性就是非常灵活,虽然有的人觉得jsx很丑陋,把逻辑都写到模版的感觉,但萝卜青菜各有所爱,适合自己适合团队的就是最

  • 从零开始在NPM上发布一个Vue组件的方法步骤

    从零开始在NPM上发布一个Vue组件的方法步骤

    TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程,包括创建项目.编写组件.打包和发布四个环节. 创建项目 这里我们直接利用@vue/cli来生成项目.如果没有安装@vue/cli的话,可以使用以下方法进行安装: # 如果喜欢npm npm i -g @vue/cli # 如果喜欢yarn yarn global add @vue/cli 此外,如果安装了npx(高版本的nodejs发行版会自带这一工具)的话,还可以很方便地通过npx vue这一方式实现免安装使用. 接下来就可以创建

  • 通过npm或yarn自动生成vue组件的方法示例

    通过npm或yarn自动生成vue组件的方法示例

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

  • vue 3.x 中mixin封装公用方法应用方式

    目录 mixin封装公用方法应用 vue3基础-mixin使用 mixin特点 定义局部mixin 定义全局mixin(不推荐) 调整mixin中属性的优先级 mixin封装公用方法应用 在src下新建文件装载公用方法:mixin/baseMixin.js const baseMixin = {     data() {         return {             title: '这个是公用标题'         }     },     methods: {         on

  • 浅谈vue 组件中的setInterval方法和window的不同

    vue组件中,this指向实例,[实例中重写了setInterval等一整套方法].所以,千万不能和 window 下挂载的方法混用 具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回[定时器对象],当然该对象中包含一个_id的私有属性 因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法 vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法 //

随机推荐