mixin混入

最新推荐文章于 2024-08-09 10:33:08 发布

努力码代码啦啦啦

最新推荐文章于 2024-08-09 10:33:08 发布

阅读量224

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/luwen63257270/article/details/119825369

版权

1.组件data,methods 优先级高于mixin data,methods优先级

2.生命周期函数，先执行mixin里面的，再执行组件里面的

<body>
  <div id="root"></div>
</body>
<script>
  // 局部mixin
  const myMixin = {
    data() {
      return {
        number: 2
      }
    },
    created() {
      console.log('mixin created');
    },
    methods: {
      handelClick() {
        console.log('mixin handelClick');
      }
    },
  }
  const app = Vue.createApp({
    data() {
      return {
        number: 1,
      }
    },
    created() {
      console.log('created');
    },
    methods: {
      handelClick() {
        console.log('handelClick');
      }
    },
    mixins: [myMixin],
    template: `
    <div>{{number}}</div>
    <child></child>
    <button @click="handelClick">增加</button>
    `
  })

  app.component('child', {
    mixins: [myMixin],
    template: `
    <div>{{number}}</div>
    `
  })

  const vm = app.mount('#root')

</script>

3.自定义的属性，组件中的属性优先级高于mixin属性的优先级

<body>
  <div id="root"></div>
</body>
<script>
  // 局部mixin
  const myMixin = {
    number: 1

  }
  const app = Vue.createApp({
    number: 2, // 自定义属性
    mixins: [myMixin],
    template: `
    <div>{{this.$options.number}}</div>
    `
  })

  app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
    return mixinVal || appValue // 优先使用混入的属性
  }

  const vm = app.mount('#root')

</script>