vue2 mixins混入

news2024/11/20 3:28:51

1.mixins混入

在vue中提供了一种复用性的操作,所混入的对象包含任意组件的选项(data|computed,生命周期|watch,methods)

2.mixins使用基本规则(选项合并冲突)

  • data | computed:数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先
  • 生命周期 | watch:同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用
  • methods:将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对

 <script src="./vue.js"></script>
    <div id="app">
        <div>data里面的数据:{{msg}}</div>
        <div>computed里面的数据:{{title}}</div>
        <div>watch里面的数据:{{obj.a}}</div>
        <button @click="getMsg">获取方法的数据</button>
    </div>
    <script>
        const HomeMixin = {
            data() {
                return {
                    msg: "home的msg",
                    obj: {
                        a: "home watch里面的数据a"
                    }
                }
            },
            computed: {
                title() {
                    return this.msg + "在computed里面"
                }
            },
            watch: {
                'obj.a': function () {
                    console.log("home里面watch对象的属性obj.a的变化");
                }
            },
            mounted() {
                console.log("home的生命周期方法mounted");
            },
            methods: {
                getMsg() {
                    console.log("home的methods");
                }
            }
        };

        new Vue({
            el: "#app",
            mixins: [HomeMixin],
            data() {
                return {
                    msg: "index msg",
                    obj: {
                        a: 1
                    }
                }
            },
            computed: {
                title() {
                    return this.msg + "--computed"
                }
            },
            watch: {
                'obj.a': function () {
                    console.log("index页面里面watch对象的属性obj.a的变化");
                }
            },
            mounted() {
                console.log("index页面的生命周期方法mounted");
            },
            methods: {
                getMsg() {
                    this.obj.a = "ss"
                    console.log("index页面的methods里面的方法getMsg");
                }
            }
        });
    </script>

3.全局混入

在main.js入口文件中使用Vue.mixin()引入。

尽量不用使用mixin全局混入,它将影响每一个之后创建的 Vue 实例(包括第三方插件 )

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

new Vue({
  myOption: 'hello!'
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1120323.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Dotnet工具箱:开源、免费的纯前端工具网站,带你探索10大工具分类和73个实时在线小工具

1. 前言 大家好&#xff0c;我是沙漠尽头的狼。 Dotnet工具箱是一个纯前端的、开源和免费的工具网站&#xff0c;周末我参考了开源项目it-tools&#xff0c;对网站界面文字进行了汉化&#xff0c;并重新部署了网站。该网站共有10大工具分类&#xff0c;提供了73个实时在线小工…

Java面向对象(基础)--package和import关键字的使用

文章目录 一、package关键字的使用1. 说明2. 包的作用3. JDK中主要的包 二、import关键字的使用 一、package关键字的使用 1. 说明 package:包package用于指明该文件中定义的类、接口等结构所在的包。语法格式 举例&#xff1a;pack1\pack2\PackageTest.java package pack1.…

PCB铺铜的那些事

PCB在所有设计内容都设计完成之后&#xff0c;通常还会进行最后一步的关键步骤&#xff0c;那就是铺铜。铺铜可以将主要的地&#xff08;GND&#xff0c;SGND&#xff08;信号地&#xff09;&#xff0c;AGND&#xff08;模拟地&#xff09;&#xff09;连接在一起。 在设计软件…

自动化运维ansible(ansible-playbook)

一、ansible-playbook的构成 Inventory&#xff1a;主机列表&#xff0c;表示剧本中的任务要应用在哪些主机上; Tasks&#xff1a;具体任务&#xff0c;即调用哪些模块完成操作&#xff0c;可以配置多个任务; Variables&#xff1a;变量&#xff0c;包含内置变量和自定义变量;…

5分钟搞懂Web3架构

Web3通过区块链基础设施管理用户数据&#xff0c;重构了用户和互联网平台之间的关系&#xff0c;定义了全新的构建互联网应用的架构模式。原文: Web3 Architecture Shubham DhageUnsplash Web 1.0 只读网站&#xff0c;如Yahoo!&#xff0c; MSN&#xff0c;谷歌等。 Web 2.0 …

设计模式:代理模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

简介&#xff1a; 代理模式&#xff0c;它是一种结构型设计模式&#xff0c;它通过引入一个代理对象来控制对原始对象的访问。代理模式的主要目的是在保持原始对象完整性的同时&#xff0c;提供对原始对象的访问和控制。 代理模式包括以下三个角色&#xff1a; 抽象主题类&a…

EtherCAT主站SDO写报文抓包分析

0 工具准备 1.EtherCAT主站 2.EtherCAT从站&#xff08;本文使用步进电机驱动器&#xff09; 3.Wireshark1 抓包分析 1.1 报文总览 本文设置从站1的对象字典&#xff0c;设置对象字典主索引为0x2000&#xff0c;子索引为0x00&#xff0c;设置值为1500。主站通过发送SDO写报文…

Linux tmux使用总结

文章目录 1 tmux介绍2 tmux概念会话Sessions、窗口Windows、面板Panesstatus line中字段含义 3 Sessions会话管理新建会话断开当前会话进入之前的会话关闭会话查看所有的会话 4 tmux快捷指令系统指令窗口&#xff08;Windows&#xff09;指令面板&#xff08;Panes&#xff09;…

cec2013(python):麻雀搜索算法SSA求解CEC2013(提供完整python代码及参考文献)

一、麻雀搜索算法SSA求解cec2013 cec2013函数简介 CEC 2013 Special Session on Real-Parameter Optimization中共有28个测试函数维度可选择为10/30/50/100。 每个测试函数的详细信息如下表所示&#xff1a; 参考文献&#xff1a;[1] Liang J J , Qu B Y , Suganthan P N , …

Go并发编程之三

一、前言 前一篇讲了Go中通道的概念&#xff0c;只讲了无缓存通道&#xff0c;这一篇我们来了解一下有缓存通道以及它与无缓存通道一些区别。 二、有缓存通道 无缓存通道&#xff1a;如果通道数据没有被接收&#xff0c;发送方会被阻塞&#xff0c;相当于同步。 有缓存通道&…

Python图像处理【14】基于非线性滤波器的图像去噪

基于非线性滤波器的图像去噪 0. 前言1. min 滤波器2. max 滤波器3. mode 滤波器4. 高斯、中值、mode 和 max 滤波器对比小结系列链接 0. 前言 本节中我们将介绍诸如 max 和 min 之类的非线性滤波器&#xff0c;与中值滤波器一样&#xff0c;它们根据滑动窗口中像素的顺序统计信…

css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别

序言 px&#xff1a;像素 相对长度单位&#xff0c;相对于显示器屏幕分辨率(推荐使用) em&#xff1a;相对长度单位 基准点为父节点字体的大小&#xff0c;如果自身定义了font-size按自身来计算&#xff08;浏览器默认字体是16px&#xff09;&#xff0c;整个页面内1em不是一个…

10个最流行的土木工程BIM软件

建筑信息模型 (BIM) 是一种数字化流程&#xff0c;最近在土木工程领域受到广泛关注。 它是一种设计、构建和管理项目的协作方法。 它涉及创建和使用建筑物的详细数字表示&#xff0c;包括 3D 模型、数据和有关项目的信息。 BIM 在参与项目的不同利益相关者之间提供实时协作&…

【Docker从入门到入土 2】Docker数据管理、网络通信和网络模式 1.0

Part2 一、Docker网络模式&#xff08;面试高频&#xff09;1.1 Docker 网络实现原理1.2 host模式1.3 container模式1.4 none模式1.5 bridge模式1.6 自定义网络 二、Docker网络通信2.1 端口映射2.2 容器互联 三、Docker资源控制3.1 Cgroup简介3.2 CPU资源控制3.2.1 设置CPU使用…

JAVA高级教程-Java Map(6)

目录 6、Map的使用 6、Map的使用 package Map01;import java.util.HashMap; import java.util.Map; import java.util.Set;/*** Map接口的使用*/ public class Demo01_HashMap {public static void main(String[] args) {Map<String,String> mapnew HashMap<>();ma…

黔院长 | 不忘初心在逆境中前行!

随着我国经济不断发展进步&#xff0c;以及人口老龄化程度的加深&#xff0c;加上自然环境质量的下降&#xff0c;人们越来越关注和重视自己的健康问题。据世界卫生组织相关数据显示&#xff0c;目前我国的亚健康率已经高达95%&#xff01;健康发展刻不容缓&#xff01; 国家政…

strlen函数

文章目录 strlen函数模拟实现&#xff1a; strlen函数 strlen函数是用来计算字符串长度的&#xff0c;不包括‘\0’ 使用&#xff1a; #include<stdio.h> #include<string.h>int main() {char arr[] "abcdef";int len strlen(arr);printf("%d\n…

Java基础(第一期):IDEA的下载和安装(步骤图) 项目结构的介绍 项目、模块、类的创建。第一个代码的实现

文章目录 IDEA1.1 IDEA概述1.2 IDEA的下载和安装1.2.1 下载1.2.2 安装 1.3 IDEA中层级结构介绍1.3.1 结构分类1.3.2 结构介绍project&#xff08;项目、工程&#xff09;module&#xff08;模块&#xff09;package&#xff08;包&#xff09;class&#xff08;类&#xff09; …

vue3 使用 elementUi: ./lib/theme-chalk/index.css is not exported from package

目录 1. 在 vue3 中使用 element-ui2. 如果启动报错&#xff1a;Module not found: Error: Package path ./lib/theme-chalk/index.css is not exported from package 1. 在 vue3 中使用 element-ui 在 vue3 中使用 element-ui&#xff0c;我们的流程一般是这样的&#xff1a;…

17 Transformer 的解码器(Decoders)——我要生成一个又一个单词

Transformer 编码器 编码器在干吗&#xff1a;词向量、图片向量&#xff0c;总而言之&#xff0c;编码器就是让计算机能够更合理地&#xff08;不确定性的&#xff09;认识人类世界客观存在的一些东西 Transformer 解码器 解码器会接收编码器生成的词向量&#xff0c;然后通…