Vue中Mixin混入

介绍

Vue中的混入Mixin,一般会混入数据信息

效果

Vue中Mixin混入_第1张图片

代码

注意混入时的优先级

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 28title>
  <script src="https://unpkg.com/vue@next">script>
head>
<body>
  <div id="root">div>
body>
<script>
  // mixin 混入
  // 组件 data, methods 优先级高于 mixin data, methods 优先级
  // 生命周期函数,先执行 mixin 里面的,再执行组件里面的
  // 自定义的属性,组件种的属性优先级高于 mixin 属性的优先级
  const myMixin = {
    number: 1
  }

  const app = Vue.createApp({
    mixins: [myMixin],
    number: 2,
    template: `
      
{{this.$options.number}}
`
}); app.config.optionMergeStrategies.number = (mixinVal, appValue) => { return mixinVal || appValue; } const vm = app.mount('#root');
script> html>

你可能感兴趣的:(VUE,vue.js,前端,javascript)