Что такое компоненты?
Компонент является одной из самых мощных особенностей Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать многоразовый код. На более высоком уровне компоненты являются пользовательскими элементами, а компилятор Vue.js добавляет к нему специальные функции. В некоторых случаях компоненты также могут быть в форме нативных элементов HTML, расширенных с помощью функции IS.
Содержание распределения слотов
① Обзор:
Проще говоря, если родительский компонент должен поместить некоторые DOMS в дочерний компонент, то эти DOMS отображаются, а не отображаются, где они отображаются, и как они отображаются, что является обязанностью распределения слотов.
② по умолчанию
Содержание родительского компонента, который находится внутри дочернего компонента, не отображается.
Например, код:
<div id = "app"> <bhouts> <pan> 12345 </span> <!-строка выше не будет отображаться-> </kids> </div> <cript> var vm = new Vue ({el: '#App', компоненты: {дети: {// Это не имеет возврата, и шаблон не будет продолжать распространять кнопку }}}); </script>Содержание отображения - это кнопка, которая не содержит содержимого в теге Span;
③singlest
Проще говоря, если вы используете только этот тег, вы можете поместить родительский компонент в содержимое дочернего компонента и поместить его, который он хочет отображать.
<div id = "app"> <bhouts> <pran> 12345 </span> <!-строка выше не будет отображаться-> </kids> </div> <script> var vm = new Vue ({el: '#App', компоненты: {дети: {// это не имеет возврата, а шаблон не будет продолжать распределять: Действие, используйте тег кнопки </button> "}}}); </script>Например, если вы пишете это, результат:
<Tood> <pan> 12345 </span>, чтобы прояснить область действия, используйте тег кнопки </button>
То есть содержимое родительского компонента, размещенного в дочернем компоненте, вставляется в положение <lot> </slot> дочернего компонента;
Обратите внимание, что даже если есть несколько тегов, они будут вставлены вместе, что эквивалентно замене тега <lot> </slot> на тег, размещенный в детском компоненте.
④ названный слот
Поместите различные теги HTML, помещенные в подкомпоненты в разных местах
Родительский компонент добавляет атрибут slot = ”name” к тегу, который будет распределен
Дочерний компонент добавляет атрибут name = ”name” в тег слота соответствующего места распределения, а затем помещает соответствующий тег в соответствующее место.
Пример кода:
<div id = "app"> <bhout> <span slot = "first"> 12345 </span> <span slot = "second"> 56789 </span> <!-строка выше не будет отображаться-> </kids> </div> <script> var vm = new Vue ({el: '#App', компоненты: {/{//это не возвращается, и не поддерживает значение, и не поддерживает значение, и это не будет. Распределение: «<Tood> <name = 'first'> </slot>, чтобы уточнить область действия, <name = 'second'> </slot>, так что используйте тег кнопки </button>"}}}); </script>Результат отображается как: (для удобства просмотра разрыв линии был скорректирован вручную)
<tood> <span slot = "First"> 12345 </span>, чтобы прояснить область действия, <span slot = "second"> 56789 </span>, так что используйте тег кнопки </button>
⑤scope содержимого распределения:
Объем распределенного контента определяется на основе шаблона, где он находится. Например, приведенный выше тег контролируется шаблоном родительского компонента (хотя он включен дочерним тегом дочернего компонента, но, поскольку он не находится в атрибуте шаблона дочернего компонента, он не принадлежит дочернему компоненту), он контролируется родительским компонентом.
Пример кода:
<div id = "app"> <bhouts> <span slot = "First" @click = "tobe know"> 12345 </span> <span slot = "second"> 56789 </span> <!-строка выше не будет отображаться-> </kids> </div> <cesript> var vm = new vue ({el: '#pap', methods: {tobe sonque: to-vamoge: in () insole: {tobe spence: to-yesle: {tobe Метод родителя ");}}, компоненты: {дети: {// Это не имеет возврата значения, а шаблон не будет продолжать распределять:" <Tutding> <slot name = 'first'> </slot>, чтобы уточнить область действия, <slot name = 'second'> </slot>, так что используйте тег кнопки </button> "}}}); </script>Когда область текста 12345 нажимается (а не кнопки все), запускается метод ToBeKnoked родительского компонента.
Но при нажатии на другие области нет никакого эффекта.
Официальный учебник говорит:
Содержание шаблона родительского компонента составлено в рамках родительского компонента; Содержание шаблона дочернего компонента составлено в рамках компонента ребенка
⑥ Советы, когда не распределен контент:
Если родительский компонент не помещает метку в дочерний компонент, или родительский компонент помещает метку в детском компоненте, но имеет атрибут слота, а у дочернего компонента нет тега для атрибута слота.
Затем метка слота детского компонента не будет играть какую -либо роль.
Если в теге слота нет контента, контент в теге слота будет отображаться, когда не распределен контент.
Как в примере кода:
<div id = "app"> <bhout> <span slot = "first"> 【12345】 </span> <!-строка выше не будет отображаться-> </kids> </div> <cript> var vm = new Vue ({el: '#App', компоненты: {дети: {// это не имеет возврата, и шамплей не будет продолжаться: name = 'First'> <tutry> 【Если нет контента, оно покажет мне 1】 </button> </slot>, чтобы прояснить область действия, <name = 'last'> <tood> 【Если нет контента, оно покажет мне 2】 </button> </slot>, так что используйте тег кнопки </div> "}}); </script>иллюстрировать:
【1】 Тэг слота с name = 'First' заменяется тегом, соответствующим родительскому компоненту (содержимое внутри тега слота отбрасывается);
【2】 Тэг слота name = 'last', потому что нет соответствующего контента, будет отображаться контент внутри тега слота.
⑦ Если вы хотите управлять свойствами корневой метки подкомпонента
[1] Во -первых, поскольку тег шаблона принадлежит родительскому компоненту, невозможно связать инструкции дочернего компонента с тегом шаблона (потому что он принадлежит родительскому компоненту);
[2] Если вам нужно контролировать, отображается ли дочерний компонент (например, V-IF или V-Show) через родительский компонент, то эта директива, очевидно, принадлежит родительскому компоненту (например, размещению в данных родительского компонента). Теги могут быть записаны на шаблоне дочернего компонента.
Как код:
<div id = "app"> <button @click = "toshow"> нажмите, чтобы позволить дочернему компоненту отображать </button> <children v-if = "abc"> </kids> </div> <script> var vm = new vue Дети: {// Это не имеет возвратного значения, шаблон: "<div> Это дочерний компонент </div>"}}}); </script>иллюстрировать:
Управляйте, отображается ли дочерний компонент через родительский компонент (нажмите кнопку, чтобы переключить значение инструкции V-IF).
[3] Если вам нужно контролировать, отображается ли дочерний компонент (например, пусть он скрывает), то эта инструкция, очевидно, принадлежит дочернему компоненту (значение будет размещено под атрибутом данных дочернего компонента), то оно не может быть записано, как указано выше, но должно быть помещено в корневую метку детского компонента.
<div id = "app"> <button @click = "toshow"> нажмите, чтобы позволить дочернему компоненту отображать </button> <diws> <span slot = "first"> 【12345】 </span> <!-строка выше не будет отображаться-> </kids> </div> <cesript> var vm = new vue ({el: '#App', methods: {tos это. $ Children [0] .tohidden = true; {this.tohidden =! this.tohidden; </script>иллюстрировать:
Нажатие на дочерний компонент заставит дочерний компонент исчезнуть;
Нажмите кнопку родительского компонента, чтобы повторно воспроизвести дочерний компонент, изменяя свой свой свой свойство компонента дочернего состава.
Инструкции дочернего компонента связаны с шаблоном компонента дочернего компонента (это можно назвать);
Выше приведено подробное объяснение примера распределения содержания слота 11 -го компонента Vuejs, введенного редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!