Vue组件公用方法提取mixin实现
作者:什么都干的派森 发布时间:2024-06-07 16:02:47
标签:Vue,组件,提取,mixin
一.应用场景
多个组件共用一个方法时可以用 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')
来源:https://blog.csdn.net/weixin_43721000/article/details/123603990
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 最近收到一个朋友委托的需求,要将MP3的音频格式转换成wav的音频格式。于是,使用python写了这个小工具便于批量进行转换操作。首先,下载
- 前言首先明确一点这个错误只会发生在delete语句或者update语句,拿update来举例 : update A表 set A列 = (s
- 如下所示:import xlrdimport pandas as pdfrom pandas import DataFrameDATA_DI
- 找到工具》选项》Designers》表设计器和数据库设计器 然后将“阻止保存要求重新创建表的更改” 的这一项的钩钩去掉就OK了
- 用法:注意是用英文的逗号",",且之间没有空格。文件名,[工作表名称,不写则默认当前激活的表],[从第几行开始,不写则默
- django在使用外键ForeignKey的时候,会自动给当前字段后面添加一个后缀_id。正常来说这样并不会影响使用。除非你要写原生sql,
- 现如今,各个国家交流密切,通过翻译使我们打破了语言壁垒,而翻译在互联网上的存在也尤为普遍。python中执行翻译操作的包是translate
- 1 作用通过 flask-script 可以以命令的形式,执行 flask 语句。提供向 Flask 插入外部脚本的功能,如 运行一个开发服
- 首先明确为什么要使用分页查询,因为数据庞大,查询不可能全部显示在页面上,如果全部显示在页面上,也会造成查询速度慢的情况,所以分页查询解决了①
- 最近遇到SQL Server 2005 输入框不能输入中文,在网上查了N久,试验了十几次奏这个法子有用:“把你表中的自动编号列放到最后面”。
- 简介mysql的innodb引擎查询记录时在无法使用索引覆盖的场景下,需要做回表操作获取记录的所需字段。mysql执行sql前会执行sql优
- Django中默认使用sqlite3数据库,今天研究了下如何将它换成常见的mysql数据库。由于项目用得python3,而MySQLdb没有
- //Paul Tero, July 2001 //http://www.tero.co.uk/des/ // //Optimised for
- 使用场景:按文件名字正序,批量执行某文件夹下的所有sql文件,并输出日志适合人群:实施工程师一、使用篇1、准备bat文件:1.1、ExecS
- 序列的逆序方式1. range 函数一般 for 循环中总会用到 range 函数来进行顺序遍历,同样的,range 也能表示序列的逆序。在
- 一切从一个糟糕的浏览器开始,它完全不支持 XHTML。什么是 MIME Type? 为什么这么说呢?首先,我们要了解浏览器是如何处理内容的。
- MySQLTuner 下载地址:http://github.com/rackerhacker/MySQLTuner-perlMySQLTun
- 1、首先访问http://www.python.org/download/去下载最新的python版本。2、安装下载包,一路next。3、为
- 先来看一个例子:>>> def foo(*args, **kwargs): print
- 铃铃铃…… 上课了老师在黑板写着这么一个标题 《Python: 你所不知道的星号 * 用法》同学A: 呃,星号不就