Vue中混入的使用详情

最新推荐文章于 2024-06-26 19:55:02 发布

官方哈哈

最新推荐文章于 2024-06-26 19:55:02 发布

阅读量1.6k

点赞数

分类专栏： # vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qwerewf/article/details/109039373

版权

vue学习笔记专栏收录该内容

7 篇文章 1 订阅

订阅专栏

虽然在项目中很少用到混入的使用，但还是记录一下关于vue中混入的使用。

简介：先来讲讲什么是混入吧，借用vue官方的回答就是。混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。通过阅读官方我个人结合demo的理解，就是将混入对象中的数据以及一些方法结合到组件中，可以理解为将这个两种东西融合为一体！

接下来我们通过demo来加深理解：

钩子函数的共存

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
var myMixins={//定义一个混入对象
  data(){
    return{
    msg:"湖人总冠军!",
    msg1:"Tocat tuseday!"
    }
  },
  created(){
    console.log("混入中的生命周期")
  }
}
export default {
  mixins: [myMixins],//将混入对象引入到组件中
  data(){
    return{
      msg:'组件中的data',
      msg2:'未退出！'
    }
  },
  created(){
    console.log("组件的生命周期函数！！")

  }
}
</script>
<style lang="scss">
</style>
   // 混入中的生命周期
    //  组件的生命周期函数！！

通过这个demo我们会发现两者的生命周期函数都打印了。

数据对象共存：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
var myMixins={
  data(){
    return{
    msg:"湖人总冠军!",
    msg1:"Tocat tuesday,嘤嘤嘤"
    }
  },
  created(){
    console.log(this.msg1)
    console.log("访问组件中的data数据：",this.msg2)
  }
}
export default {
  mixins: [myMixins],
  data(){
    return{
      msg:'组件中的data',
      msg2:'未退出！'
    }
  },
  created(){
    console.log("访问混入中的数据：",this.msg1)
    console.log("组件的生命周期函数！！"+this.msg)
  }
}
</script>
<style lang="scss">
</style>

输出：
在这里插入图片描述
普通方法混入：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
var myMixins={
  data(){
    return{
   
    }
  },
  methods: {
            mixin: function() {
                console.log('混入中的方法')
            },
            mixinTwo: function () {
                console.log('js好啊，js可以做前端 js可以做后端 js还可以做移动端...')
            }
}
}
export default {
  mixins: [myMixins],
  data(){
    return{
  
    }
  },
   methods: {
            mixin: function () {
                console.log('#app!!')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
}

</script>
<style lang="scss">
</style>

效果：
在这里插入图片描述
通过效果图不难发现，当混入对象和组件方法键名冲突时，取组件方法

局部混入：
在是实际的项目开发中我们可以，将混入对象定义一个单独的文件，例如：
在 components 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件：

const mixin = {
  data() {
    return {
      msg: '我曾踏足山巅，也曾跌落低谷，二者都让我受益良多'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
}
export default mixin//将混入进行导出

此时就可以在需要的文件中进行导入并且通过mixins: [mixin]引入到文件中。

混入的全局引入：

<body>
    <div id="app"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    Vue.mixin({
        methods: {
            mixinOne: function() {
                console.log('mixinOne')
            }    
        }
    })
    new Vue({
        el: '#app',
        methods: {
            mixinTwo: function () {
                console.log('mixinTwo')
            }
        },
        mounted() {
            this.mixinOne()
            this.mixinTwo()
        }
    })
    
	// mixinOne
	// mixinTwo
</script>

2. 在 main.js 中写入如下代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.mixin({
  data() {
    return {
      msg: '哈哈'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

3.最后就可以在组件中直接使用：

<template>
	<div>{{msg}}</div>
</template>
<script>
export default {
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// 哈哈，这是mixin混入的方法
</script>

官方哈哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中混入的使用详情

虽然在项目中很少用到混入的使用，但还是记录一下关于vue中混入的使用。简介：先来讲讲什么是混入吧，借用vue官方的回答就是。混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。通过阅读官方我个人结合demo的理解，就是将混入对象中的数据以及一些方法结合到组件中，可以理解为将这个两种东西融合为一体！接下来我们通过demo来加深理解：钩子函数的共存<template>
复制链接

扫一扫

专栏目录