Руководство по упаковке компонентов Vue

Vue.js
Руководство по упаковке компонентов Vue

содержание

Три элемента компонента vue

  1. параметр реквизита
  2. слот пользовательский слот
  3. пользовательское событие события

Основное использование

В проекте, созданном с помощью vue-cli, создание компонентов очень удобно, нужно только создать новый файл .vue, а затем написать HTML-код в шаблоне, и простой компонент готов. Полный компонент, кроме шаблона есть скрипт и стиль

<template>
  <div class="headComponent">
    子组件{{{myData}}
  </div>
</template>

<script>
export default {
    props:['data','type'],
    inheritAttrs: false,
    data(){
        return{
            myData:'',
        }
    },
    mounted(){

    },
    methods:{
       
    }
}
</script>
<style scoped>

</style>

Затем импортируйте и зарегистрируйте его в js других файлов, вы можете использовать этот компонент напрямую.

import list from '../components/headComponent.vue'

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

Для передачи параметров от родителя к дочернему необходимо использовать реквизиты, обычные реквизиты выглядят так:

props:['data','type']

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

 props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

Для параметров, передаваемых реквизитом, он не рекомендует его операции, так как он изменит родительские компоненты внутри данных одновременно // Vue2.5 сделан оптимизирован для реквизитов, эта проблема не существует Если нам нужно иметь такую ​​операцию, вы можете написать:

let copyData = JSON.parse(JSON.stringify(this.data))

Почему бы просто не написать let myData = this.data ? Из-за прямого присваивания это всего лишь неглубокая копия для объектов и массивов, указывающая на один и тот же адрес памяти, если один из них изменится, другой также изменится. После реверсирования и преобразования JSON реализуется глубокая копия, которая не может влиять друг на друга.

Во-вторых, дочерний компонент запускает событие родительского компонента.

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

// 子组件方法：触发父组件方法，并传递参数data到父组件
handleSubmit(data){
    this.$emit('submitToParent', data)
}

// 父组件调用子组件
<child-component @submitToParent="parentSubmit"></child-component>
... ...
// 父组件中被触发的方法，接受到子组件传来的参数
parentSubmit(data){
    // 父组件的逻辑处理
}

Логика в родительском компоненте должна обрабатываться в родительском компоненте, а логика в дочернем компоненте на основе данных родительского компонента должна обрабатываться в дочернем компоненте; Это не только уменьшает связь, но и гарантирует, что соответствующие данные не будут загрязнены.

3. Не забудьте оставить слот

Компонент общего назначения, часто не идеально подходящий для всех сценариев применения. Таким образом, при инкапсуляции компонентов вам нужно выполнить только 80% функций компонента, а оставшиеся 20% позволить родительскому компоненту решить через Solt.

Вышеуказанное является универсальным компонентом, в некоторых сценариях кнопки справа являются «ручками» и «делегат». В других сценариях кнопка должна быть заменена на «View» или «Удалить» При капсулировании компонента вам не нужно писать кнопку, вам нужно только оставить слот в соответствующем положении, оставить положение кнопки, а затем записывать кнопку в родительском компоненте

子组件
<div class="child-btn">
    <!-- 具名插槽 -->
    <slot name="button"></slot>
    <!-- 匿名插槽（每个组件只能有一个） -->
    <slot><slot>
</div>

父组件
<child>
    <!-- 对应子组件中button的插槽 -->
    <button slot="button">slot按钮</button>
</child>

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

Другой пример:

В процессе разработки часто возникает необходимость добавить новый контент в подкомпонент, при этом внутри подкомпонента можно оставить один или несколько сокетов.

Затем добавьте контент при вызове этого подкомпонента

Добавленный контент будет распределен в соответствующий слот

Слот также можно использовать в качестве области видимости, определить переменные в дочернем компоненте, а затем настроить метод рендеринга в родительском компоненте. Сборка:

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

В этом примере слот сначала добавляется в подкомпонент, а переменная массива navs определяется в подкомпоненте. Затем добавьте содержимое в родительский компонент с помощью шаблона области видимости, где область видимости является неотъемлемым свойством, а ее значение соответствует временной переменной props. И props получит параметр navs, переданный от родительского компонента к дочернему компоненту.

Вы также можете просмотреть использование слота:nuggets.capable/post/684490…

4. Vuex: используйте его с умом, но не злоупотребляйте

Подкомпоненты передают данные подкомпонентам

В Vue нет прямого метода передачи параметров между подкомпонентами, поэтому рекомендуется объединять подкомпоненты, которым необходимо передавать данные, в один компонент. Если вам необходимо передать параметры от дочернего к дочернему, вы можете сначала передать их родительскому компоненту, а затем передать их дочернему компоненту. Компоненты «родитель-потомок» передают параметры через реквизиты и пользовательские события, а компоненты, не относящиеся к «родитель-потомок», обычно используют Vuex для передачи параметров. Vuex изначально предназначен для управления состоянием компонентов, а также может использоваться для передачи параметров сложных компонентов.

Однако, хотя Vuex можно использовать для передачи параметров, делать это не рекомендуется, поскольку Vuex похож на глобальную переменную, он всегда будет занимать память. При записи состояния с огромными данными будет утечка памяти (люди живы, они не могут быть бесполезными, потому что у вещей есть недостатки, их можно разумно использовать). Советы: Когда страница обновится, Vuex будет инициализирован, и отредактированные данные также будут потеряны. Если вам нужно сохранить данные при обновлении страницы, вы можете сохранить идентификатор через url или sessionstorage, а затем запросить данные через ajax.

5. CSS компонентов: разумное использование области действия для управления областью действия стиля

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

6. Динамические компоненты

Vue также может монтировать несколько подкомпонентов в одном месте, переключать компоненты с помощью переменных и добиваться таких эффектов, как меню вкладок.

Такую функцию можно реализовать с помощью роутинга vue-router, но роутинг больше подходит для более крупных компонентов, и url будет соответствующим образом изменен. Элементы, зарезервированные самим Vue, могут динамически привязывать компоненты к функции is, что упрощает динамическое переключение компонентов.
В приведенном выше примере при изменении значения tabView компонент отрисовывает соответствующий компонент, что очень похоже на эффект роутинга, но адресная строка не изменилась. На этом этапе вы можете использовать ** keep-alive **, чтобы сохранить компонент в памяти и избежать повторного рендеринга.

Семь рекурсивных компонентов

Когда у компонента есть атрибут name, он может рекурсивно вызывать себя в своем шаблоне, что очень эффективно при разработке древовидных компонентов.

Выше приведен подкомпонент, который определяет имя как simple03, а затем вызывает себя в шаблоне, комбинируя v-for для достижения рекурсии. Чтобы предотвратить бесконечный цикл, v-if добавляется в качестве условия суждения при вызове самого себя. При вызове родительского компонента нужно передать дерево через реквизиты:

Окончательный результат рендера:

Другие ситуации

Дочерний компонент изменяет данные родительского компонента

В версиях после vue 2.0 подкомпонентам не разрешено напрямую изменять данные родительского компонента.Это можно сделать в версии 1.0, но часто требования проекта требуют изменения данных родительского компонента, так как же нам работать вокруг него? Когда мы передаем данные родительского элемента дочернему компоненту, нам нужно передать неосновной тип, то есть передать объект или массив.Дочерний компонент манипулирует данными, обращаясь к свойствам в объекте.Потому что объекты и массивы передаются по ссылке, они изменяются в дочернем компоненте, при этом родительский компонент также будет изменяться синхронно следующим образом:

// 父组件要props传递给子组件的数据
myData:{
    info:'父组件信息'
}

// 子组件
 <template id="tpl">
    <div>
        <button @click="change">change</button>
        <p>{{data.info}}</p>
    </div>
</template>
... 省略部分无关代码 ...
props:['data'],
methods:{
    change(){
        this.data.info = 'change info'
    }
}

Когда дочерний компонент нажимает кнопку изменения, чтобы изменить данные, родительский компонент также изменяется синхронно.

Если вы не хотите влиять на значение родительского компонента, мы также можем использовать метод преобразования JSON-инверсии, упомянутый в начале статьи, сделать глубокую копию в смонтированном методе и использовать другую переменную в качестве носителя при инициализации. данные в данных, так что переменная-носитель изменяется, просто это не повлияет на значение переменной родительского компонента.

Справочный блог:woo woo woo.cn blog on.com/wise неправильно/боится… блог woo woo woo.cn on.com/also also/afraid/66…

Категории