Vue之mixin混入详解

目录
  • 局部混入
  • 全局混入
  • 总结

 

局部混入

<template>
  <div>
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  //引入一个混合
  import {
    hunhe,hunhe2
  } from '../mixin'
  export default {
    name: 'Student',
    data() {
      return {
        name: '张三',
        sex: '男'
      }
    },
    mixins: [hunhe,hunhe2]
  }

</script>

export const hunhe = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

export const hunhe2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }

}

全局混入

import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 讨论vue中混入mixin的应用

    讨论vue中混入mixin的应用

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 即 mixin 在引入组件之后,会将组件内部的内容如data.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了. 比如在两个不同的组件的组件中调用sayHi方法,需要重复定义,倘若方法比较复杂,代码将更加冗余,但使用mixins 就相对比较简单了. 首先

  • Vue 详解mixins混入用法大全

    Vue 详解mixins混入用法大全

    目录 前言 一.什么是Mixins? 二.什么时候使用Mixins? 三.如何创建Mixins? 四.如何使用Mixins? 五.Mixins的特点 六.Mixins合并冲突 七.与vuex的区别 八.与公共组件的区别 前言 当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixin

  • vue中混入mixins的使用方法

    vue中混入mixins的使用方法

    目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,

  • Vue混入mixins滚动触底的方法

    前言 在app端常常看到类似加载数据的动画,接下来我们来实现滚动触底加载动画提示,以及如何复用这些逻辑. 如何判断滚动触底 来看下几张图: 情况一: 当文档高度还为超过可视区域高度时,不存在滚动,所以也没有滚动触底 情况二: 当文档高度超过可视区域的高度时,还有剩余的文档没有滚动完,也就是说 可视区域高度 + 滚动高度 < 文档高度 ,此时没有达到滚动触底的条件   情况三: 文档高度大于可视区域,并且滚动到文档底部, 也就是说 可视区域高度 + 滚动高度 = 文档高度 判断是否滚动到底 经过上

  • 深入了解Vue.js 混入（mixins）

    混入 (mixins)定义了一部分可复用的方法或者计算属性.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 来看一个简单的实例: var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() }, methods: { startmix

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

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

  • Vue之mixin混入详解

    Vue之mixin混入详解

    目录 局部混入 全局混入 总结   局部混入 <template> <div> <h2 @click="showName">学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> </div> </template> <script> //引入一个混合 import { hunhe,hunhe2 } from '../mixin' export defa

  • 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

  • vue组件与复用详解

    一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ

  • Vue生命周期函数调用详解

    Vue生命周期函数调用详解

    目录 生命周期 Vue.mixin 生命周期选项合并 调用生命周期函数 结语 生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • 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路由--网站导航功能详解

    1.首先需要按照Vue router支持 npm install vue-router 然后需要在项目中引入: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 2.定义router的js文件 import Vue from 'vue' import Router from 'vue-router' import User from '../pages/user' import Home fro

  • vue 过滤器filter实例详解

    vue的过滤器一般在JavaScript 表达式的尾部,由"|"符号指示: 过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等. 例如:{{ date | dateFormat }}这是过滤器的写法:{{ dateFormat(date) }}这是函数调用的写法 可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义. <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --&

随机推荐