Как использовать и обращать внимание на миксины в Vue

Vue.js

функции миксинов

1. Методы и параметры не являются общими для компонентов

Например, если в смешанном объекте есть переменная cont: 1, измените значение cont на 5 в компоненте A. В это время значение, полученное в компоненте B, по-прежнему равно 1 или начальному значению смешанного объекта. -in объект, и данные не передаются.

2, стоимость опции объекта

Такие как методы, компоненты и т. д., параметры будут объединены, а компонент с конфликтом ключей перезапишет объект миксина.Например, в объекте миксина есть метод А, а в компоненте также есть метод А. , В это время, если он вызывается в компоненте, выполнение выполняется в компоненте.Метод A

3, значение варианта функции

Такие как созданные, смонтированные и т. д., они будут объединены и вызваны.Функция ловушки в смешанном объекте вызывается перед функцией ловушки в компоненте.В той же функции ловушки сначала будет выполняться смешанный объект, а затем функция этого компонента будет выполнена.

4. Отличие от vuex

vuex: используется для управления состоянием. Определенные в нем переменные можно использовать и изменять в каждом компоненте. После изменения значения этой переменной в любом компоненте значение этой переменной в других компонентах также будет изменено.

Смешины: общие переменные могут быть определены и использоваться в каждом компонент. После введения в компоненту каждая переменная независима друг от друга, а модификация значения не повлияет на друг друга в компоненте.

5. Отличия от общедоступных компонентов

Компонент: введение компонента в родительский компонент эквивалентно предоставлению отдельного пространства в родительском компоненте для использования дочерним компонентом, а затем передаче значений в соответствии с реквизитами, но они по сути независимы.

Введение в миксины

Примеси: после того, как компонент введен, он объединяется с объектами и методами в компоненте, что эквивалентно расширению объектов и методов родительского компонента, что можно понимать как формирование нового компонента.

Миксины: очень гибкий способ распространения повторно используемой функциональности в компонентах Vue. Объекты Mixin могут содержать произвольные параметры компонента. Когда компонент использует миксин, все параметры миксина будут смешаны с собственными параметрами компонента.

具体应该怎么用？ Возьмите каштан:

  • Определение общедоступного файла миксинов: Если mixin.vue

<template>

</template>

<script>

    export default {
        name: 'mixins-test-main',
        components: {},
        props: {},
        data () {
            return {
                mixinData: 'mixin中的变量'
            }
        },
        methods: {
            mixinFunction () {
                return '我是mixins里面的公共方法'
            },
        },
        mounted () {
        },
        computed: {}
    }
</script>

<style scoped>
</style>
  • На ваших страницах вызовы: Mixins необходимо импортировать этот файл, а затемmixins:['文件名']Просто используйте это
<template>
    <div>
        <div @click="handleMixin">调用mixin方法</div>
    </div>
</template>

<script>
    import MixinItem from './mixin'

    export default {
        name: 'mixin-test-comp',
        props: {},
        mixins: [MixinItem],
        components: {},
        data () {
            return {}
        },
        methods: {
            handleMixin () {
                console.log('mixin-data=========', this.mixinData)
                let mixfun = this.mixinFunction()
                console.log('mixin-fun====>>>', mixfun)
            },
        },
        mounted () {
        },
        computed: {}
    }
</script>

<style scoped>
</style>
Категории