vue的mixins属性详解
首先先给出官网 https://vuejs.org/v2/guide/mixins.html
今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个属性。
下面是我的-mixin.js 文件
import {mapGetters, mapMutations, mapActions} from 'vuex' export const playlistMixin = { computed: { ...mapGetters([ 'playList' ]) }, mounted() { this.handlePlaylist(this.playList) }, activated() { this.handlePlaylist(this.playList) }, watch: { playList(newVal) { this.handlePlaylist(newVal) } }, methods: { handlePlaylist() { throw new Error('component must implement handlePlaylist method') } } }
这个文件就暴露出一个对象,不过这个对象和组件很类似,也就是组件的js代码部分类似。
这个.js文件要做的事情就是,在生命周期中和playList 变量改变的时候触发handlePlaylist 函数,但是这个函数的逻辑是在各自要改变的组件当中去实现。下面看看怎么用Mixin。
import {playlistMixin} from 'common/js/mixin' //引入Mixin export default { mixins: [playlistMixin], methods: { handlePlaylist (playlist) { let bottom = playlist.length > 0 ? '60px' : '' this.$refs.recommend.style.bottom = bottom this.$refs.scroll.refresh() }, } }
在使用的组件中这样调用。
mixins: 这个属性是个数组,也就是说可以加载多个 minxin 文件。
handlePlaylist 方法是完成业务逻辑。所以在组件的生命周期中都会添加 this.handlePlaylist() 方法。
这样就可以减少一部分代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章:
- 详解Vue 中 extend 、component 、mixins 、extends 的区别
- 详解vue mixins和extends的巧妙用法
- 详解Vue.js Mixins 混入使用
- 在Vue.js中使用Mixins的方法
- vue mixins组件复用的几种方式(小结)
相关推荐
-
在Vue.js中使用Mixins的方法
一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能, 但是它们之间又有足够的不同的地方, 该如何选择呢? 我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件, 然后定义足够多的props以方便区分使用场景? 这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件, 在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险, 这违反了"DRY"的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且, 迫使维护人员, 甚至是你自己,
-
详解Vue.js Mixins 混入使用
Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h
-
vue mixins组件复用的几种方式(小结)
最近在做项目的时候,研究了mixins,此功能有妙处.用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似.我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦:第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰:有没有好的方法,有那就是用vue的混合插件mixins.混合在Vue是为了提出相似的数据和功能,使代码易懂,简单.清晰. 1.场景 假设我们有几个不同的组件,它们的工作是切换状
-
详解Vue 中 extend 、component 、mixins 、extends 的区别
new Vue().component 首先我们来约定一个选项对象 baseOptions,后面的代码会用到. let options = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }, created(){ conso
-
详解vue mixins和extends的巧妙用法
vue提供了mixins.extends配置项,最近使用中发现很好用. 混合mixins和继承extends 看看官方文档怎么写的,其实两个都可以理解为继承,mixins接收对象数组(可理解为多继承),extends接收的是对象或函数(可理解为单继承). 继承钩子函数 const extend = { created () { console.log('extends created') } } const mixin1 = { created () { console.log('mixin1
-
vue的mixins属性详解
首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个属性. 下面是我的-mixin.js 文件 import {mapGetters, mapMutations, mapActions} from 'vuex' export const playlistMixin = { computed: { ...m
-
Vue之计算属性详解
1.何为计算属性:大白话讲就是计算出来的结果保存在属性当中,可以想象为缓存. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--注意了同志们是curr
-
Vue之ref属性详解
总结 本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
-
VUE 组件的计算属性详解
目录 前言 计算属性 总结 前言 今天也是元气满满的一天,今天整理一下VUE组件的计算属性!~~ 开始我们的学习之旅 计算属性 先引用一张图 来看一下计算属性之间的关联: 注意: methods和computed里的东西不能重名 method:定义方法,调用方法使用currentTime(),需要带括号 computed:定义计算属性,调用属性使用currenTime2,不需要带括号:this.message是为了能够让currentTime2观察到数据变化 如何在方法中的值发生了变化,则缓存就
-
使用Vue逐步实现Watch属性详解
目录 watch 初始化watch deep.immdediate属性 结语 watch 对于watch的用法,在Vue文档 中有详细描述,它可以让我们观察data中属性的变化.并提供了一个回调函数,可以让用户在属性值变化后做一些事情. watch对象中的value分别支持函数.数组.字符串.对象,较为常用的是函数的方式,当想要观察一个对象以及对象中的每一个属性的变化时,便会用到对象的方式. 下面是官方的一个例子,相信在看完之后就能对watch的几种用法有大概的了解: var vm = new
-
vue模板语法-插值详解
1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使
-
vue axios用法教程详解
axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1. Vue.prototype.$ajax=axio
-
vue组件与复用详解
一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ
-
Vue-router的使用和出现空白页,路由对象属性详解
Vue-router的使用和出现空白页 2018.08.28 更新 vue-router:前端路由系统--改变视图的同时不会向后端发出请求 1. hash 2.history 2018.06.25 更新 get到一个新技能 import Vue from 'vue' import Router from 'vue-router' import api from '../lib/service' //接口文档 Vue.use(Router) const router = { mode: 'hist
-
Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数据的唯一接口. 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号). 子组件不能直接在模板里面渲染父元素的数据. 如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据.然后在模板里渲染这个变量(前面的a),这时候渲染
随机推荐
- canvas+gif.js打造自己的数字雨头像的示例代码
- 使用forfiles命令批量删除N天前文件
- 使用Ajax实现简单的带百分比进度条实例
- sqlserver 各种判断是否存在(表名、函数、存储过程等)
- Vue中使用vux的配置详解
- 基于Vue实现图书管理功能
- 微信小程序 Linux开发环境设置详解
- MVC、MVP和MVVM分别是什么_动力节点Java学院整理
- PHP中怎样保持SESSION不过期 原理及方案介绍
- ASP.NET使用GridView导出Excel实现方法
- ASP.NET将Session保存到数据库中的方法
- Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
- 在Javascript里访问SharePoint列表数据的实现方法
- Android开发之毛玻璃效果实例代码
- Android ScrollView嵌套横向滑动控件时冲突问题
- 浅析Android之Adapter用法总结
- PHP最常用的ini函数分析 针对PHP.ini配置文件
- JS事件添加和移出的兼容写法示例
- jQuery解析与处理服务器端返回xml格式数据的方法详解
- jQuery扩展_动力节点Java学院整理