Недавно я читал официальную документацию vue.js вне работы и обнаружилдинамические компонентыа такжеЧто следует учитывать при анализе шаблонов DOMКогда я говорил об особой функции, я подумал, что это очень интересно, поэтому я написал краткое изложение своего собственного понимания.
местный
Практика написания каштанов
На самом деле, прочитав это, я немного запутался: в чем разница между ними и как их использовать?
Тщательный анализ, не так сложно понять, ссылкаэтот блог, мы тоже пишем каштан попробовать
Мы обычно чаще используем частичную регистрацию, поэтому я напишу каштан для компонентов частичной регистрации.
Замените часть контента, чтобы увидеть результат рендеринга
Взглянув только на пользовательский компонент componentA, заменив is="componentA" на is="componentB", вы обнаружите, что содержимое этой части изменилось с содержимого исходного компонента componentA на содержимое componentB.
Здесь мы обнаружим, что хотя тег , содержимое компонента A не отображается, но отображается содержимое компонента B, что указывает на то, что vue имеет функцию обнаружения при рендеринге содержимого компонента, и если он назначен , отображать содержимое Содержимое компонента, соответствующего значению.Если атрибут is отсутствует, отображается содержимое компонента, соответствующего метке.
Затем, если вы замените на
Глядя только на пользовательский компонент componentB, вы можете увидеть его в родительском компоненте: то есть это привязка данных, тогда связанное значение должно быть определено в данных текущего экземпляра. То, что связано в каштане, равно двум, и каким бы ни было значение двух, компонент B будет отображать что.
Точно так же, если вы замените на
,
и другие теги, совместимые с W3C, он может отображаться нормально: это содержимое назначенного компонента! Вот и всединамические компоненты!
наконец
После некоторого практического анализа каштанов я, наконец, понял некоторые из них и подытожил:
Тот же момент: можно добиться эффекта динамических компонентов
Отличие: это привязка данных, связанное значение должно быть определено в данных, а значение, присвоенное is, должно быть именем дочернего компонента.