Vue mixin, użycie w komponentcie.

Question

Mam atomy, które mają wspólne właściwości przykład:

const atomMixin = {
  label: {
    type: String,
    default: '',
  },

  name: {
    type: String,
    default: '',
  },

  value: {
    name: String,
    default: '',
  }
}

Oraz Atom który z nich korzysta:

<template>
  <div>
    <label class="inputTextControler__label" for="search">{{ label }}</label>
    <input class="inputTextControler__input inputTextControler__input--search"
      placeholder="Korepetycje"
      id="search"
      type="text"
      name="search"
      @keyup="handleKeyUp"
    />
  </div>
</template>
<script>
  import AtomMixinProps from '../Mixins/AtomMixin.js';
  export default {
    name: 'AtomInputSearch',
    props: Object.assign({
      searchField: {
        type: String,
        value: ''
      }
    }, AtomMixinProps),
    data() {
      return {
      };
    },
    methods: {
      handleKeyUp(event) {
        this.$store.dispatch('find', {'field': this.searchField, 'value': event.target.value});
        this.$emit('handleKeyUp', event.target.value);
      }
    }
  };
</script>

I object.asign() oczywiście działa, ale z dokumentacji znalazłem coś takiego: Vue.mixin();

I mam pytanko jak z tego korzystać?

W komponentcie, powinen się tak odwłować: this.$parent.$vue.mixin(mixin,1 mixin2) przy created?

Answer 1

Jeśli chcesz dodać mixin lokalnie

import AtomMixinProps from '../Mixins/AtomMixin.js';
export default {
  name: 'AtomInputSearch',
  mixins: [AtomMixinProps],
  props: {
    searchField: {
      type: String,
      value: ''
    }
  },
  ...
}

Jeśli chcesz dodać mixin do wszystkich komponentów

import AtomMixinProps from '../Mixins/AtomMixin.js';
import Vue from 'vue'

Vue.mixin(AtomMixinProps)

Zwróć uwagę, że mixin z propsami powinien mieć strukturę:

const mixin = {
  props: {
    someProp: {
      type...
    }
  }
}

---

W komponentcie, powinen się tak odwłować: this.$parent.$vue.mixin(mixin,1 mixin2) przy created?

Nie rozumiem, do czego chcesz się odwoływać?

Comments

Do silinika, o właśnie o takie coś mi chodziło .Dzięki :)