То, как вы не знаете ценность компонентов vue

Vue.js

предисловие

Последняя статья об интервью Vue (Какие ответы интервьюер хочет услышать во время интервью) упомянул различные методы передачи стоимости компонента, в этой статье объясняется, как использовать несколько методов передачи стоимости.

props, $emit, eventbus, vuex, $parent / $children / ref, sessionStorage, localStorage, параметры маршрутизации (также передача значений). Эти методы передачи значений слишком распространены, и каждый, кто использует vue, не может знаете, поэтому в этой статье мы не будем объяснять их по одному, а сейчас представим несколько способов передачи значений, которые не распространены в обычное время. Если у вас есть какие-либо вопросы по вышеизложенному, вы можете оставить сообщение в комментариях, спасибо, что нашли время прочитать мою работу, пожалуйста, исправьте ее.

1. provide/ inject

Родительский компонент предоставляет переменные через Provide, а затем вводит переменные в дочерний компонент через inject.
Примечание. Независимо от того, насколько глубоко здесь вложены подкомпоненты, до тех пор, пока вызывается inject, данные в провайдере могут быть введены, не ограничиваясь возвратом данных из свойства props текущего родительского компонента.
Предполагая, что A является родительским компонентом B, а C являются подкомпонентами A, а D является подкомпонентом B, затем используйте предоставление для определения переменных в компоненте A, а переданные значения могут быть получены в компоненте A. Компоненты B, C и D путем ввода. (Переменные, определенные в условии, нельзя использовать в родительских компонентах)

Примечание: предоставление и внедрение в основном предоставляют варианты использования для библиотек плагинов/компонентов более высокого порядка. Его не рекомендуется использовать непосредственно в коде приложения. (Официальное описание документа)

родительский компонент

export default {
    data () {
        return {}
    },
    provide: {
        index: '来自index的数据'
    }
}

Подсборка

export default {
    data () {
        return {}
    },
    inject: ['index']  // 直接可以在页面使用index或在js中进行赋值
}

2. $attrs

Вызовите дочерний компонент 3 в родительском компоненте A:<custom-three :custom="custom" :custon="custon" />, подкомпонент три использует реквизиты для получения, а значение, которое не получено подкомпонентом с помощью реквизитов, может использовать $attrs для получения переданного значения, то есть третий компонент делится на следующие случаи

  1. Когда реквизиты: ['custom','custon], $attrs = {};
  2. Когда реквизит: ['custom'], $attrs = {custon: 'ton'};
  3. Реквизиты: [] Когда, $ attrs = {custom: 'Tom', cudon: 'Ton'};

На этом этапе введите четыре подкомпонента в три компонента и используйте v-bind для привязки $attrs к компоненту.<custom-four v-bind="$attrs" />Вы можете использовать props или $attrs для получения в четыре, и его можно передавать все время в соответствии с этим правилом.

А переменные, которые не используются компонентом, будут отображаться в html-структуре, например:

<div custon="ton">
    <p>three---tom</p> >
    <p>attr---{}</p>
</div>

Добавление inheritAttrs к дочернему компоненту может скрыть custon="ton" тега div. Значение inheritAttrs по умолчанию равно true, и его можно скрыть, установив для него значение false. Примечание. Установка для inheritAttrs значения false не влияет на использование $attrs.

3.$listeners

2 описывает использование $attrs для передачи значения родительского компонента дочернему компоненту при каждом поколении.Слушатели $listeners в этом разделе предназначены для передачи метода от родительского компонента дочернему компоненту при каждом поколении.При вызове дочернего компонента , значение дочернего компонента отделяется и передается родительскому компоненту.

Сначала вызовите дочерний компонент 3 в родительском компоненте A:<custom-three @customEvent="customEvent" />, В настоящее время используйте $listeners в подкомпоненте A для получения, получения объекта {customEvent: function(){...}}, вызовите подкомпонент четыре в трех компонентах и ​​используйте v-on для привязки $listeners к подкомпоненту ` `, в настоящее время вы можете напрямую получить доступ к customEvent в четвертом подкомпоненте или использовать $listeners для доступа к customEvent.

родительский компонент А

<template>
<div>
    <custom-three :custom="custom" :custon="custon" @customEvent="customEvent"></custom-three>
</div>
</template>

<script>
import customThree from './chuanzhi/three'
export default {
    data () {
        return {
            custom: 'tom',
            custon: 'ton'
        }
    },
    components: {
        customThree
    },
    mounted () {},
    methods: {
        customEvent(data) {
            console.log('data', data)
        }
    }
}
</script>

дочерний компонент три

<template>
    <div>
        <p>three---{{ custom }}</p>
        <p>attr---{{$attrs}}</p>
        <p>-------------------------------------</p>
        <custom-four v-bind="$attrs" v-on="$listeners"></custom-four>
    </div>
</template>

<script>
import customFour from './four'
export default {
    data() {
        return {}
    },
    components: {
        customFour
    },
    props: ['custom'],
    inheritAttrs:false
    created() {
        console.log('1', this.$listeners)
    }
}
</script>

подкомпонент четыре

<template>
    <div>
        <p>four---{{ custon }}</p>
        <p>attr---{{$attrs}}</p>
        <el-button @click="fashe">发射</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: ['custon'],
    inheritAttrs:false
    created() {
        console.log('2', this.$listeners)
    },
    methods: {
        fashe() {
            this.$emit('customEvent', 'piupiupiu')
        }
    }
}
</script>

observable реализует управление состоянием

observable делает объект отзывчивым. Он используется внутри Vue для обработки объекта, возвращаемого функцией данных.

Возвращенный объект можно использовать непосредственно в функциях рендеринга и вычисляемых свойствах, и он будет запускать соответствующие обновления, когда что-то изменится. Также может использоваться как минимальное межкомпонентное хранилище состояний для простых сценариев:

Вызовите setCount в компоненте 1, чтобы увеличить или уменьшить счетчик на 1, счетчик, вызываемый в каждом компоненте, будет изменен, и будет запущено обновление компонента.

файл store.js

import vue from 'vue';
export const store =  vue.observable({count: 0});
export const mutation = {
  setCount( count ){
    store.count = count;
  }
}

Компонент 1

<template>
  <div class="hello">
    <p @click="setCount(testCount + 1)">+</p>
    <p @click="setCount(testCount - 1)">-</p>
    <test />
    <p>{{testCount}}</p>
  </div>
</template>

<script>
import test from './test'
import { store,  mutation} from './store.js'
export default {
  name: 'HelloWorld',
  components: {
    test
  },
  methods: {
    setCount: mutation.setCount
  },
  computed: {
    testCount(){
      return store.count
    }
  }
}

Компонент 2

<template>
  <div>test{{testCount}}</div>
</template>
<script>
import { store } from './store.js';
export default {
  computed: {
    testCount(){
      return store.count
    }
  }
}
</script>
Категории