vue的混入用法 minxin

wyl_02

已于 2022-05-14 17:11:42 修改

阅读量364

点赞数

文章标签： vue.js javascript html

于 2021-09-26 17:13:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45739279/article/details/120492662

版权

vue的混入用法 minxin

1.新建一个公共js文件 mixins.js

export default {
  created () {
  },
  data(){
    return {
      data:'我是外来人口'
    }
  }
}

2.组件中引入mixins.js

<template>
  <div class=''>
  </div>
</template>

<script>
import mixin from './mixins'  //引入mixin
export default {
  mixins: [mixin], // 混入mixin,此处可有多个
  data () {
    return { // 组件中并没有定义message
    };
  },
 created () {
   console.log(this.message)  // 打印结果： 我是外来人口
 }
}
</script>

<style lang='scss' scoped>
</style>

3.假如本身有这个变量，则以组件中的值为准

<template>
  <div class=''>
  </div>
</template>

<script>
import mixin from './mixins'  //引入mixin
export default {
  mixins: [mixin], // 混入mixin,此处可有多个
  data () {
    return { 
      message:'我是本地人口'
    };
  },
 created () {
   console.log(this.message)  // 打印结果：我是本地人口
 }
}
</script>

<style lang='scss' scoped>
</style>

4.不单单是data可以混入，其他如钩子函数、计算属性、监听器、过滤属性等等同样可以