Без излишеств vue advanced advanced (1) обзор сути компонентов

Vue.js
Но молчание есть высшее презрение.. ------- Лу Синь

Предисловие к серии

Эту серию можно разделить на несколько частей:

  1. Сводка по базовому и расширенному использованию
  2. Еще немного репрезентативного боя
  3. Анализ исходного кода (это надо объяснять на самом вульгарном, нет, на самом популярном языке, это я гарантирую)

Короче говоря, безусловно, достойно высокого уровня Advanced. . .

Классификация компонентов

Компоненты Vue в основном включают:

  1. Страницы, сгенерированные vue-router, можно назвать компонентами маршрутизации.
  2. Независимые базовые компоненты: базовые компоненты, такие как Дата и ввод, которые можно повторно использовать глобально.
  3. Бизнес-компоненты, за исключением двух вышеупомянутых, являются бизнес-компонентами.

Сущность компонента

props

  • тип ТПП
  • по умолчанию по умолчанию
    • Если это объект или массив, он должен быть записан как метод для возврата
msg:{
    type: Array,
    default: ()=>([])
}
  • проверка валидатора, есть значение параметра
  • inheritAttrs, следует ли наследовать атрибуты html
  • Дочерний компонент не может изменить свойство, переданное от родительского компонента.

event

метод первый

<parent-com @on-click="handleClick"></parent-com>

子组件
<button>点击</button>
在子组件中触发
this.$emit('on-click', event);

Метод два

加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com>

子组件
<button>点击</button>

slot

<slot>Узел — это расположение указанного слота.v-slot:[name] может указывать расположение слота.С именем он называется именованным слотом.

Именованный слот

Элементы могут использовать специальное имя атрибута для настройки распределения содержимого. Несколько слотов могут иметь разные имена. Именованный слот будет соответствовать элементам с соответствующим атрибутом слота во фрагменте контента. родительский компонент

    <slotshow>
        <p>{{msg}}</p>
        <h6 slot="xxx">就是没有废话！</h6>
        
        vue2.6以上的版本是这样的
        <h6 v-slot:xxx>就是没有废话！</h6>
    </slotshow>

Подсборка

    <div class="slotcontent">
        <slot></slot>
        <slot name="xxx"></slot>
    </div>

слот с прицелом

Слот с областью действия — это особый тип слота, используемый для замены визуализируемого элемента повторно используемым шаблоном (способным передавать данные). В дочернем компоненте просто передайте данные в слот, точно так же, как при передаче реквизита компоненту, содержимое слота может использовать эти переданные данные в родительском со специальной областью свойств.<template>Элемент должен существовать, чтобы указать, что он является шаблоном для слота с заданной областью. Значение scope соответствует имени временной переменной, которая получает объект реквизита, переданный от дочернего компонента.

Компонент списка

var childNode = {
 template: `
     <ul>
     // 通过:text="item.text"进行传值
     <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
     </ul>
 `,
 data(){
     return{
          items:[
              {id:1,text:'第1段'},
              {id:2,text:'第2段'},
              {id:3,text:'第3段'},
          ]
        }
    }
};

var parentNode = {
 template: `
 <div class="parent">
    <p>父组件</p>
     <child>
            // 通过props进行接收
          <template slot="item" scope="props">
          <li>{{ props.text }}</li>
          </template>
     </child>
 </div>
 `,
 components: {
    'child': childNode
 },
};

Компонентная коммуникация (вторая часть подробно объяснит 8 способов использования)

  1. ref: Регистрация справочной информации для элемента или компонента;
  2. $parent / $children: Доступ к родительским/дочерним экземплярам.
  3. propsотец сыну
  4. $emit和$on, ребенок -----> родитель
  5. vuex

немного знаний

  1. Как изменить элемент в массиве:
    1. Изменить ссылку на объект напрямую
    2. Вы можете использовать push, shift и другие методы
    3. Вы можете использовать метод мутации vue
    Vue.set(vm.userinfo,2,{a:1})  == vm.$set(vm.userinfo,2,{a:1})
  2. является собственностью
    <table>
	<tr id="row"></tr>  注意is的使用 table中只能使用tr
</table>
  3. Данные в дочернем компоненте должны быть функцией для возврата объекта, это должно гарантировать每一个实例的data属性都是独立的，不会相互影响

На этом все по первому разделу, не люблю писать глупости

Я думаю, это поможет вам, нажмите

отличный

, и продолжать выводить такие короткие и эффективные статьи в продолжении, чтобы помочь вам освоить как можно больше контента в кратчайшие сроки.В конце концов, кто не любит сделать это раз и навсегда? ❥(^_-) спасибо ~

последующий каталог

Без излишеств vue advanced advanced (1) обзор сути компонентов

Никакой ерунды Vue advanced advanced (2) 8 видов связи компонентов подробное объяснение

Без излишеств Vue advanced advanced (три) расширенного использования и лучшие практики компонентов

Категории