Запись проблемы, с которыми сталкиваются Vue в практической работе проектов и решений

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

Если у вас есть лучшее решение Гостевая книга Комментарии

Значение хэндовера не отображается .tab

    Код перед модификацией (независимый код был удален), затем переключаться назад и вперед Tab, составные детали (расширенный текстовый компонент) не отображается значение

<шаблон> 
  <эш-вкладка V-модель = "activeName" @ вкладка щелчка = "handleClick"> 
    <эль-закладки панель ярлык = "详细信息" имя = "exactlyInfo"> 
       <точно-Вск-привязывать =» $ ATTRS»> </ точно-инфо> 
    </ эль-элементная-панель> 
    <эль-закладки панель: метка = "" название = "changeLogTitle CHANGELOG"> 
        <поддержание активности> 
            <компонент иой = "CHANGELOG" v- обязывать: есть = "CHANGELOG" " > </ компонент> //动态组件
        </ поддержание активности> 
    </ эль-закладки панели> 
  </ эш-вкладка> 
</ шаблон> 
<скрипт> 
Уста exactlyInfo = решимость => требуется ([ './ exactlyInfo.vue'],Решимость) // внешние вводные средства, богатый текстовый компонент 
Const CHANGELOG = решительность => требуется ( [ './ changeLog.vue'], решительность) // внешние вводные средства 
экспорта по умолчанию {
    Данные () { 
        возвращение { 
            activeName: 'exactlyInfo', 
            exactlyInfo, 
            CHANGELOG, 
        }; 
    }, 
    Компоненты: { 
        'точно-инфо': exactlyInfo 
    } 
    
    методы: { 
        handleClick (закладка, событие) {// закладка切换显示对应组件
            переключатель (tab.name) { 
            случай 'exactlyInfo': 
                this.exactlyInfo = exactlyInfo; 
                перемена; 
            случай 'ChangeLog': 
                this.changeLog = CHANGELOG 
                перерыва; 
            } 
        } 
    } 
}; 
</ скрипт>

 Пересмотренный Кодекс

<шаблон> 
  <эш-вкладка V-модель = "activeName" @ вкладка щелчка = "handleClick"> 
    <эль-закладки панель ярлык = "详细信息" имя = "exactlyInfo"> 
       <точно-Вск-привязывать =» $ ATTRS "v-если =" isShowExactlyInfo "> </ точно-инфо>

    </ EL-Tab-Pane> 
    <EL-Tab-панель: метка = имя "changeLogTitle" = "ChangeLog"> 
        <Keep-Alive> 
            <Компонент REF = "ChangeLog" V-привязку: IS = "ChangeLog" " > < / компонент> // динамический компонент 
        </ Keep-Alive> 
    </ EL-Tab-Pane> 
  </ EL-вкладки> 
</ Template> 
<Script> 
Уст exactlyInfo Resolve => требовать ([ './ exactlyInfo.vue' ], решительность) // внешние вводные средства, богатый текстовый компонент 
Const CHANGELOG = решимость => требуется ( [»./ changeLog.vue '], решительность) // внешнего введение означает 
экспорт по умолчанию { 
    Data () { 
        возвращение { 
            activeName:' exactlyInfo», 
            exactlyInfo,
            CHANGELOG,

              isShowExactlyInfo: правда,

        }; 
    }, 
    Компоненты: { 
        'точно-инфо': exactlyInfo 
    }, 
    
    методы: { 
        handleClick (вкладка, событие) {// отобразить соответствующий переключатель в сборе Вкладка 
            Переключатель (tab.name) { 
            случай 'exactlyInfo': 
                this.exactlyInfo = exactlyInfo ;

                  this.isShowExactlyInfo = True // 新增

                перемена; 
            случай 'ChangeLog': 
                this.changeLog = CHANGELOG

 　　　　　　　　　　this.isShowExactlyInfo = ложь // 新增

                перемена; 
            } 
        } 
    } 
}; 
</ скрипт>

Обходной путь: Показать скрытые v-если Vue компоненты управления для достижения эффекта повторного рендеринга компонентов

 

II. Метод субблока перед выполнением методы родительской сборки, в результате чего узла принимающего родительского элемента пуст.

      Решение: по умолчанию скрыты от v-если вю пусть родительская страница, инициализация родительской страницы завершена снова будет отображаться непосредственно на коде

 

<Шаблон> 
    <DIV v-IF = «isShowPage »> 
      <Child-Компонент: Данные = „parentData“> </ Child-Компонент> // суб-компоненты имеют свои собственные методы реализации и жизненный цикл могут быть выполнены до родительского компонента в этом случае он пуст parentData 
    </ DIV> 
</ Template> 
<Script> Экспорт по умолчанию {    Data () {          reutrn {            isShowPage: к ложным , 

           parentData: {}

         } 
    } 
    Установленный () { это .init ()}, 
    методы: { 
      инициализации () {// инициализация метод 
        this.parentData = {имя: 'родитель' } // родительский компонент субблок для передачи значения 
        это .isShowPage = истина        }      } } </ SCRIPT>