задний план
На пути к использованию Vue вы должны знать, как зарегистрироваться и вызвать компонент
Обычно мы реализуем весь процесс вызова компонентов в три шага.
- пройти черезimportимпортные компоненты
- объект компонента в родительском компонентеcomponentsЗарегистрируйте импортированные субкомпоненты в
- использовать компонент в родительском компоненте
<template>
<div>
<Child msg="Hello World！"/>
</div>
</template>
<script>
import Child from "../components/Child";
export default {
name: "page",
components: {
Child
}
};
</script>
Это может быть наиболее распространенный шаблон для 80% друзей Vue для использования подкомпонентов.Да, я часто делаю это... Если вы устали от использования этого метода и хотите перейти на новый, тогда спускайтесь вниз, и мы узнаем больше Два менее часто используемых, но очень эффективных способа улучшить силу развития.
Предустановка сцены 1
Представьте себе компонент центра участников, есть часть области, используемая для отображения соответствующих модулей отображения разницы между членами и членами, но эти два будут отображать только один из них, членов и не членов. Предположим, у нас теперь естьMemberInfoтак же какUserInfoДва компонента, мы хотим отображать соответствующие модули в соответствии с личностью пользователя.
Реализация 1
Это может быть метод реализации, о котором подумают большинство фронтенд-игроков, включая меня часто (закрывая лицо)
<template>
<div class="container">
<button @click="isMember = !isMember">{{isMember?'我不想要会员了，哼':'我要成为会员'}}</button>
<UserInfo v-if="!isMember"/>
<MemberInfo v-else/>
</div>
</template>
<script>
import UserInfo from "../components/UserInfo";
import MemberInfo from "../components/MemberInfo";
export default {
name: "user",
data() {
return {
isMember: false
};
},
components: {
UserInfo,
MemberInfo
}
};
</script>
Реализация 2
Прочитав официальную документацию, мы обнаружим, что Vue предоставляет встроенный компонент component, который отображает «метакомпонент» как динамический компонент. согласно сisзначение, чтобы определить, какой компонент визуализируется. Если вы мало что знаете об этом, официальный сайт портала будет предоставлен в конце статьи.
<template>
<div class="container">
<button @click="isMember = !isMember">{{isMember?'我不想要会员了，哼':'我要成为会员'}}</button>
<component :is="userComponentName" title="component就是好用哟"/>
</div>
</template>
<script>
import UserInfo from "../components/UserInfo";
import MemberInfo from "../components/MemberInfo";
export default {
name: "userComponent",
data() {
return {
isMember: false
};
},
components: {
UserInfo,
MemberInfo
},
computed: {
userComponentName() {
let { isMember } = this;
return isMember ? "member-info" : "user-info";
}
}
};
</script>
От решения 1 до решения 2 становится ясно, что мы используем вычисляемые свойства для сопоставления со встроенными компонентами.componentполностью устраненv-if/v-elseлогическое суждение, вы также можете сделать передачу данных в обычном режиме
Просто с этого момента кажется, что нет никакой разницы, кроме того, что метод использования изменился. Это не то, что я хочу представить на этот раз. Существующие два компонента модуля нам еще нужно импортировать и зарегистрировать, чтобы завершить вызов. Теперь мы не хотим заранее регистрировать подкомпоненты, которые нам нужно использовать, потому что это слишком хлопотно и снижает производительность, мы хотим попытаться динамически импортировать и зарегистрировать для использования, давайте продолжим, спешим!
Реализация 3
<template>
<div class="container">
<button @click="isMember = !isMember">{{isMember?'我不想要会员了，哼':'我要成为会员'}}</button>
<component :is="userComponentImstance" title="component就是好用哟"/>
</div>
</template>
<script>
export default {
name: "userImport",
data() {
return {
isMember: false
};
},
computed: {
userComponentImstance() {
let { isMember } = this;
let pathName = isMember ? "MemberInfo" : "UserInfo";
//通过import动态导入组件 配合webpack实现组件分离
return () => import(`../components/${pathName}`);
}
}
};
</script>
Видно, что мы уже не звоним в виде импорта заранее зарегистрированных компонентов.componentПредоставьте ему непосредственно полный компонентный объект Читая официальную документацию, мы видим, что она принимает один из двух вариантов:
- Имя зарегистрированного компонента
- компонентный объект
Теперь мы передаем динамикуimportПодкомпоненты импортируются в видеcomputedУсловно визуализируем соответствующие дочерние компоненты, кто его знает, кто его использует. Он будет осуществляться только при работающей программе, что избавляет нас от формы импорта и регистрации компонентов заранее.Этот эффект имеет знакомый вкус с загрузкой по требованию при использовании сторонних компонентов.. Ну да, в том числе Когда мы оптимизируем производительность SPA, отложенная загрузка маршрутизатора имеет ту же цель.
когда мы изменимсяisMemberЭта переменная включает динамическое переключение компонентов. Преимущество этого в том, что когда мы используем динамический импорт,webpackсоздаст отдельный файл для каждого файла, соответствующего импортированной функцииchunk, что мы часто называем загрузкой подпакетов вместо загрузки всех компонентов одновременно. Текущий пример не показывает, насколько улучшена производительность, но в реальной разработке это преимущество будет очень очевидным.
если вы знакомы сwebpackВы можете хорошо использовать это, чтобы разделить код и создать стратегию загрузки вашей собственной программы. В частности, черезУзнайте о разделении кода
Предустановка сцены 2
Раньше я сталкивался с требованием, которое состоит в том, чтобы отображать несколько активных модулей на главной странице торгового центра последовательно в соответствии с порядком возврата бэкэнда, я тогда не понимал, как этого добиться. И теперь, когда вы видите это, я думаю, у вас, вероятно, есть небольшая идея. (Если нет, то это моя вина, статья написана недостаточно ясно). Теперь вы знаете встроенные компонентыcomponentИ наша динамическая загрузка, мы можем легко добиться этого.
Предполагая, что нашим родительским компонентом является домашняя главная страница, может бытьSeckillшип,GroupГрупповая покупка,Limitлимит покупки,BargainМодулей активности для торга четыре, отображение и сортировка модулей определяется данными, а не нами.hard coded
<template>
<div>
<p>假装这是一个商城首页</p>
<button @click="shuffle">随机切换模块顺序</button>
<component :is="item.imstance" v-for="(item ,i) in componentImstances" :info="item" :key="i"/>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
moduleList: [
{
type: "Bargain",
title: "砍价",
startTime: "2019-12-01",
endTime: "2019-01-01"
},
{
type: "Seckill",
title: "秒杀",
startTime: "2019-12-05",
endTime: "2019-01-01"
},
{
type: "Limit",
title: "限购",
startTime: "2019-12-07",
endTime: "2019-01-01"
},
{
type: "Group",
title: "团购",
startTime: "2019-12-11",
endTime: "2019-01-01"
}
]
};
},
components: {},
methods: {
shuffle() {
let { moduleList } = this;
let resultArr = [];
while (moduleList.length > 0) {
var index = Math.floor(Math.random() * moduleList.length);
resultArr.push(moduleList[index]);
moduleList.splice(index, 1);
}
this.moduleList = resultArr;
}
},
computed: {
componentImstances() {
let { moduleList } = this;
return moduleList.map(item => {
item.imstance = () => import(`../components/${item.type}`);
return item;
});
}
}
};
</script>
Таким образом реализована кастомная сортировка наших активных модулей, но на данный момент наш динамический импорт модулей подгружается по данным возвращаемым бэкендом, никто не узнает будут ли мотыльки в середине. чтобы избежать динамически импортируемых компонентов. Загрузка завершается неудачно при неизвестных обстоятельствах, мы можем сделать приглашение шаблона исключения. поставить вышеcomponentImstancesНебольшая модификация:
computed: {
componentImstances() {
let { moduleList } = this;
return moduleList.map(item => {
item.imstance = () => {
return new Promise((resove, reject) => {
let imstance = import(`../components/${item.type}`);
imstance.then(res => {
resove(res);
});
imstance.catch(e => {
resove(import("../components/Error"));
});
});
};
return item;
});
}
}
Ссылаться на:
Суммировать
Гибкое использование компонентов и импорта полезно, если компонент имеет много разных представлений и его легко расширить. Поскольку он асинхронный, шаблон загружается только при необходимости, что делает код более легким. В качестве отступления, компонент взаимодействует с keep-alive для кэширования компонентов, и эффект также первоклассный, поэтому в этой статье я не буду вдаваться в подробности. Соответствующий исходный код демо был обновлен доГитхаб-портал.
❤️ наконец-то
Если вы находите этот контент вдохновляющим:
Поделитесь им, чтобы больше людей могли увидеть этот контент (добро пожаловатьподобноа такжеСфокусируйся на😊)
Обратите внимание на общественный номер»Самец креветки переднего конца», еженедельно делясь галантереей переднего плана