mixin

混入的形式
 全局混入 【 不推荐 】
 局部混入
混入的作用:
将选项中某一个或是多个单独分离出去管理,让职能更加单一高效,符合模块化思想

全局混入


全局混入 Vue.mixin(config)
mixin.js

/* 
  这个文件搞方法
*/
const  obj = {
  methods: {
    aa () {
      alert('aa')
    },
    bb () {
      alert('bb')
    }
  }
}

main.html

<body>
  <div id="app">
    <p> {{ num }} </p>
    <p> {{ msg }} </p>
    <button @click = "aa"> aa </button>
    <button @click = "bb"> bb </button>
  </div>

  <div id="root">
      <button @click = "aa"> aa </button>
      <button @click = "bb"> bb </button>
  </div>

</body>
<script src="./js/mixin.js"></script>
<script src="../../lib/vue.js"></script>
<script>
  /* 全局混入   Vue.mixin(config) */
  Vue.mixin({
    methods: {
      ...methods
    }
  })
  new Vue({
    el: '#app',
    data: {
      num: 1000,
      msg: 'hello vue'
    }
  })


  new Vue({
    el: '#root'
  })
</script>

局部混入


data.js

/* 
  这个文件管理数据
*/

const data = {
  data: {
    num: 1000,
    msg: 'hello vue'
  }
}

main.html

<body>
  <div id="app">
    <p> {{ num }} </p>
    <p> {{ msg }} </p>
    <button @click="aa"> aa </button>
    <button @click="bb"> bb </button>
    <p> {{ yybMsg }} </p>
  </div>

</body>
<script src="./js/data.js"></script>
<script src="./js/mixin.js"></script>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    分出去的mixin权利是没有总部的大的
  */
  new Vue({
    el: '#app',
    data: {
      yybMsg: '这是一个信息',
      num: 2000
    },
    mixins: [data, obj]
  })

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值