VUE2混入的简单使用介绍

被混入的组件

<template>

  <div class="vuemix">

    <!-- 组件中没有name,但是混入的对象中有,即可使用 -->

    <p>{{name}}</p>

    <!-- 组件中有age属性,混入对象中也有age属性,当混入对象和组件中有共同的属性时,读取组件中的值 -->

    <p>{{age}}</p>

  </div>

</template>

<script>

//=====================================================================================================

//===:vue的混入

//===:混入规则:1.混入的data中  键名相同,则读取组件中的键名,反之读取混入的键名

//===:混入规则:2.同名钩子函数混合为一个数组,因此都将会被调用,混入对象的钩子将在自身的钩子之前调用

//===:混入规则:3.值为对象的混入,如metholds,components等,选项会被合并,组件对象覆盖混入的对象

import vuemix from "./vuemix"

export default {

  //===:在这里混入vue混入对象

  mixins:[vuemix],

  data(){

    return{

      age:30

    }

  },

  created(){

    console.log('我是组件的created');

  },

  methods:{

    fn(){

      console.log("我是组件里面的方法")

    },

    fnConsoleLog1(){

      console.log(1)

    }

  },

  mounted(){

    this.fn()

    //===:被混入的组件中没有fnConsoleLog2方法,但是混入对象中有这个方法,所可以调用到fnConsoleLog1方法

    //========================================================================================输出:1    

    this.fnConsoleLog2()

  }

}

</script>

<style>

</style>

混入对象

//================================================================================

//===:定义一个混入的对象

var vueMix = {

  data(){

    return{

      name:'赵光砚',

      age:16

    }

  },

  created(){

    console.log('我是混入对象的created');

    //===:由于混入对象的created和组件的created都进行了输出,当程序运行时,会输出

    //===:1.我是混入对象的created

    //===:2.我是组件的created

    //===总结:同名钩子函数混合为一个数组,因此都将会被调用,混入对象的钩子将在组件的钩子之前调用

  },

  mounted() {

    //===:这里调用了fn方法,但是fn输出的是

    //================================:我是组件里面的方法

    //===:总结:值为对象的混入,如metholds,components等,选项会被合并,组件对象覆盖混入的对象

    this.fn()

    //===:混入对象中没有fnConsoleLog1方法,但是被混入的组件中有这个方法,所可以调用到fnConsoleLog1方法

    //========================================================================================输出:1

    this.fnConsoleLog1()

  },

  methods: { 

    fn(){

      console.log("我是混入对象的方法")

    },

    fnConsoleLog2(){

      console.log(2)

    }

  },

}

export default vueMix

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,112评论 0 2
  • ## 经典bug:1.模板引擎的渲染## 难点:### 0.vue总结#### 指令:```jsVue.direc...
    x_ng阅读 311评论 0 0
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,109评论 1 10
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,245评论 0 6
  • 上周去上海见到了在德国陪读时候认识的朋友,在黄浦江边的小资店里吃饭聊天,我们聊到了生活、工作和工资。我讶异地发现,...
    timshan阅读 293评论 0 1