VUE混合mixins

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量168 收藏
点赞数
文章标签： vue vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44822110/article/details/104783040
版权

VUE混合mixins

把公共的部分抽取出来放到一个类中
调用： mixins: [类名]
HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混合mixins</title>

</head>

<body>
    <div id="app">
        <popup></popup>
        <tooltip></tooltip>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>
JS
//相似于公共的类
var base = {
    data: function () {
        return {
            visible: false,
        }
    },
    methods: {
        show: function () {
            this.visible = true
        },
        hide: function () {
            this.visible = false
        },
        toogle: function () {
            this.visible = !this.visible
        }
    }
}

// 提示框---自定义组件
Vue.component('tooltip', {
    template: '<div><span @mouseenter="show" @mouseleave="hide">bys</span><div v-if="visible">白岩松</div></div>',
    // 直接调用混合mixins
    mixins: [base]
})

// 弹出层 弹出框---自定义组件
Vue.component('popup', {
    template: '<div><button @click="toogle">Popup</button><div v-if="visible"><span @click=hide>X</span><h4>标题</h4>内容内容内容内容内容内容内容内容内容内容内容内容</div></div>',
    // 直接调用混合mixins
    mixins: [base],
    // 明确在下面设置的属性会覆盖mixins的属性
    data: function () {
        return {
            visible: true,
        }
    },
    // methods: {
    //     
    // }

})

var app = new Vue({
    el: '#app',
    data: {

    }
})
吃瓜的阳大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue如何使用混合Mixins和插件开发详解
10-15
主要介绍了Vue如何使用混合Mixins和插件开发详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue混入html,vue混入(mixins)的应用
weixin_32758097的博客
06-23 1387
vue的API中有个混入，这里主要介绍利用选项合并来二次封装element-ui的el-table标签，使其达到可以最大限度的复用。html官方例子官方的例子作了简单的介绍，这里就不浪费篇幅去介绍了，你们能够直接查看官方例子选项合并或则查看下面的截图： vue 其实你们看了官方文档已经知道了用法和注意事项，下面开始一步步来验证便可。 新建Vue项目利用vue-cli工具新建一个项目，步骤以下：...
15.mixins
天蝎
07-03 168
mixins作用 分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项。 例子： base.js（把需要复用的功能写在一个文件里） const base = { data(){ return { message : { name : 'TOM', age ...
Vue mixins（混入） 附代码示例详解
a_靖的博客
03-01 2256
mixins 我们称它为 “混入” ； 官方的解释： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 简单理解它的作用： 可复用组件中的功能，可以理解为一个公用的组件对象，定义一个混入对象以后，在其它的组件中引入该对象，就相当该对象中的东西都在组件中一样，在发生冲突时以组件数据优先； 下面我们来看怎么定义和使用它； 1. 新建一个文件，文件
riot.js教程【四】Mixins、HTML内嵌表达式
weixin_34179762的博客
11-17 144
前文回顾 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期； riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法； riot.js教程【一】简介； 共享Mixins 混合开发可以使你很好的复用代码，如下所示： var OptsMixin = { // the `opts` argument is the option ...
Vue 混入（mixin）详细介绍（可复用性、全局混入）
热门推荐
高大志leo的博客
12-13 3万+
基础 混入（mixin）提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 基本使用 1、定义一个混入（mixin） let mixin = { created() { console.log("我是mixin里面的created!") }, methods: { hello() { .
vue混入(mixin)的详解
qq_40431896的博客
11-12 1万+
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 1.钩子函数 同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。 var mixin = { created: function () { console.log('混入对象的钩子被调用') } } new Vue({ mixins: [mixin], cre
Vue之Mixins(混入)的使用方法
01-19
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 当组件和混入对象含有...
详解vue mixins和extends的巧妙用法
11-29
混合mixins和继承extends 看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。 继承钩子函数 const extend = { created () {...
vue mixins组件复用的几种方式（小结）
08-29
主要介绍了vue mixins组件复用的几种方式（小结）,vue中提供了一种混合机制mixins，用来更高效的实现组件内容的复用,有兴趣的可以了解一下
基于vue开发的popup的mixins用于管理弹出框的遮盖层
08-09
基于vue开发的popup 的mixins 用于管理弹出框的遮盖层
学习之路 vue混入mixins
lmh19921116的博客
09-18 642
基础 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 例子： // 定义一个混入对象 var myMixin = { created: function () { this.hello() }, ...
vue的mixins属性
出埃及记
08-23 4956
首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性，因为项目中有多个地方都要改(业务逻辑相同)，所以就看有没办法只改变一个地方，把方法加进去,最后找官网就发现这个属性。 下面是我的-mixin.js 文件 import {mapGetters, mapMutations, mapActions} from '
vue中使用mixins
weixin_44824513的博客
05-20 432
Mixins （混合或混入） 定义的是一个对象 概念 一种分发Vue组件可复用功能的非常灵活的方式。混入对象可以包含任意组件选项（组件选项：data、watch、computed、methods、created、mounted…）。当组件使用混入对象时，组件和混入对象的同名选项将以恰当的方式进行“合并”。 用法 1）定义一个混入对象mixin（创建一个mixin.js文件） 2)把混入对象mixin混入当前组件中 合并规则 1）data：数据在内部会进行递归合并，并在发生冲突时以组件数据优先（组件和混入
vue的mixins
weixin_51565477的博客
01-28 96
①创建base.js base.js存放我抽离出来的数据或者方法，这里再src/api/base.js(路径随意) 加入组件中有一个方法onSunmit,base.js中也有一个相同的函数onSunmit,那么采用就近原则进行调用，即调用组件自身的函数 const baseMinxin = { // 公共数据 data () { msg: 12345 }, methods: { // 公共方法 onSunmit () { console.log('点击查询', t
混入mixin和自定义插件
panda_pan9527的博客
08-01 387
混入mixin 什么叫做混入？ 将组件的选项中的一部分分离出去，单独管理 方式有两种 局部混入 mixins 【 推荐 】 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 442
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 232
vue echarts 柱状图 堆叠柱状图
vue2 mixins用法
12-28
Vue2中的mixins用法如下所示： 1. 创建一个混入对象，该对象可以包含任意组件选项： ```javascript var myMixin = { created: function () { console.log('混入对象的created钩子被调用') }, methods: { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值