Vue中的混入的使用(vue mixins)

使用场景：

例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新，或者使用的都是一个方法的时候，我们就可以使用vue mixins进行封装调用，以及继承，具体看代码。

选项合并

      var mixin = {
        data: function () {
        return {
         message: 'hello'
        }
       },
       created:function(){
        console.log('我是mixins中的created')
       },
       methods:{
        show:function(num){
          console.log(num) //mixins种的函数可以接收组件种的传参。
        },
        foo: function () {
         console.log('foo')
        },
        conflicting: function () {
         console.log('from mixin')
        }
       }
      }

      var vm = new Vue({
       mixins: [mixin],
       data: function () {
        return {
         title: 'def',
         message: 'goodbye'
        }
       },
       created: function () {
        console.log('我是Vue中的created')
        console.log(this.$data)
        this.show(50); //可通过函数传参,把组件中需要的参数传给mixins进行使用。
       },
       methods:{
        bar: function () {
         console.log('bar')
        },
        conflicting: function () {
         console.log('from self')
        }
       }
      })

      vm.foo() // => "foo"
      vm.bar() // => "bar"
      vm.conflicting() // => "from self"

注意以下三点：

1、当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

2、同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

3、值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

全局混入

也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

//为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h

  • Vue之Mixins(混入)的使用方法

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行"合并". 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先. var Mymixin = { data: function(){ return { message: 'hello', foo: 'ab

  • Vue中的混入的使用(vue mixins)

    使用场景: 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码. 选项合并 var mixin = { data: function () { return { message: 'hello' } }, created:function(){ console.log('我是mixins中的created') }, methods:{ show:function(num){ console

  • 使用vue中的混入mixin优化表单验证插件问题

    这段时间开发的时候使用到了这个表单校验插件,用起来比较麻烦就不说了,还有较严重的缺陷.自己最终还是抽空把这个插件进行了一些优化,虽然优化的方式和当初自己定下的方向不怎么相同,但是就使用体验上来说还是提高了很多. 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题,主要针对的是插件开发本身存在的问题.下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名,比较麻烦. 必须在提交表单按钮上使用 v-checkSubmit 指令进行表单校验,提交函数必须

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • 简单理解Vue中的nextTick方法

    简单理解Vue中的nextTick方法

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q

  • vue中img src 动态加载本地json的图片路径写法

    vue中img src 动态加载本地json的图片路径写法

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu

  • 一文了解Vue中的nextTick

    Vue中的 nextTick 涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于 nextTick 的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下 nextTick . 一.示例 先来一个示例了解下关于Vue中的DOM更新以及 nextTick 的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if=&quo

  • 详解VUE中常用的几种import（模块、文件）引入方式

    1 引入第三方插件 import echarts from 'echarts' 2 引入工具类 第一种是引入单个方法 import {axiosfetch} from './util'; 下面是写法,需要export导出 export function axiosfetch(options) { } 第二种  导入成组的方法 import * as tools from './libs/tools' 其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中

  • 详解vue中组件参数

    我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你.这在开发一个会被别人用到的组件时尤其有帮助. 我们来看下最为简单和常见的vue代码 <div id="root"> <item content="hello"></item> </div> <script> Vue.compo

  • 如何在Vue中使localStorage具有响应式(思想实验)

    响应式是Vue.js的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个问题时,让Vue响应式与 localStorage 一起使用. 如果运行以下代码,则会看到计数器显示为静态值,并且不会像我们期望的那样发生变化,这是因为setInterval在 localStorage 中更改了该值. new Vue({ el: "#counter", data:

  • vue中如何简单封装axios浅析

    vue中如何简单封装axios浅析

    把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti

随机推荐