¿Qué son los componentes?
El componente es una de las características más potentes de Vue.js. Los componentes pueden extender los elementos HTML y encapsular el código reutilizable. En un nivel superior, los componentes son elementos personalizados, y el compilador de Vue.js le agrega características especiales. En algunos casos, los componentes también pueden estar en forma de elementos HTML nativos, extendidos con la función IS.
Componentes de uso
registro
Como se mencionó anteriormente, podemos crear un constructor de componentes usando vue.extend ()::
var myComponent = vue.extend ({// opciones ...})Para usar este constructor como componente, debe registrarse con `vue.component (etiqueta, constructor)` **:
// Registre globalmente el componente, la etiqueta es my-componentvue.component ('my-component', myComponent)<p> vue.js no exige la regla W3C (minúscula e incluye una barra corta) para nombres de etiquetas personalizados, aunque es mejor seguir esta regla.
Una vez registrado el componente, se puede usar como un elemento personalizado <MyComponent> en el módulo de la instancia principal. Para asegurarse de que el componente esté registrado antes de inicializar la instancia raíz:
<Div id = "Ejemplo"> <MyComponent> </myComponent> </div> // Define var myComponent = vue.extend ({Template: '<iv> un componente personalizado! </div>'}) // registrar vue.component ('my-component', myConent) // create root instancia ({{{{{{{{{'#exath)Renderizado como:
<div id = "Ejemplo"> <Viv> Un componente personalizado! </div> </div>
Tenga en cuenta que la plantilla del componente reemplaza el elemento personalizado, y la función del elemento personalizado es solo como punto de montaje. Puede usar la opción de instancia reemplazar para decidir si reemplazarlo.
Registro local
No es necesario registrar cada componente a nivel mundial. Solo se puede usar en otros componentes, regístrese con los componentes de la opción de instancia:
var child = vue.extend ({ / * ... * /}) var parent = vue.extend ({Template: '...', componentes: {// <myComponent> solo se puede usar en la plantilla de componentes parentales 'my-component': child}})Esta encapsulación también es adecuada para otros recursos, como instrucciones, filtros y transiciones.
Registre el azúcar sintáctico
Para simplificar el evento, puede pasar en el objeto de opción directamente en lugar del constructor a las opciones Vue.component () y de componentes. Vue.js llama automáticamente vue.extend () detrás de la parte posterior:
// Extender y registrar vue.component ('my-component', {plantplate: '<iv> un componente personalizado! </div>'}) // Esto también es posible con el registro local var parent = vue.extend ({components: {'my-component': {platplate: '<div> un componente personalizado! </iv>'}})Problemas de opciones de componentes
La mayoría de las opciones pasadas al constructor VUE también se pueden usar en Vue.extend (), pero hay dos casos especiales: datos y El. Imagínese si simplemente pasamos un objeto como una opción de datos para vue.extend ()::
var data = {a: 1} var myComponent = vue.extend ({data: data})¡El problema con esto es que todas las instancias de MyComponent compartirán el mismo objeto `data`! Esto no es básicamente lo que queremos, por lo que debemos usar una función como la opción 'Data` para devolver un nuevo objeto:
var myComponent = vue.extend ({data: function () {return {a: 1}}})Del mismo modo, la opción `El` también debe ser una función cuando se usa en` vue.extend () `.
Análisis de plantilla
La plantilla de Vue es una plantilla DOM, que utiliza un analizador nativo del navegador en lugar de implementar una por sí misma. En comparación con las plantillas de cadena, las plantillas DOM tienen algunos beneficios, pero hay problemas y debe ser un fragmento HTML válido. Algunos elementos HTML tienen limitaciones sobre qué elementos se pueden colocar dentro de él. Limitaciones comunes:
• A no puede contener otros elementos interactivos (como botones, enlaces)
• UL y OL solo pueden incluir directamente Li
• Seleccionar solo puede incluir la opción y Optroup
• La tabla solo puede incluir directamente la cabeza, tbody, tfoot, TR, subtítulos, col, colgroup
• TR solo puede incluir TH y TD directamente
En la práctica, estas limitaciones pueden conducir a resultados inesperados. Aunque puede funcionar en casos simples, no puede confiar en componentes personalizados para expandir los resultados antes de la validación del navegador. Por ejemplo, <my-select> <pection> ... </ppection> </select> no es una plantilla válida, incluso si el componente my-select termina expandiéndose a <select> ... </select>.
Otro resultado es que las etiquetas personalizadas (incluidos los elementos personalizados y las etiquetas especiales, como <componente>, <memplate>, <cartial>) no se pueden usar en etiquetas que tengan restricciones en elementos internos, como UL, selección, tabla, etc. Las etiquetas personalizadas dentro de estos elementos se mencionarán fuera del elemento, así que representan incorrectamente.
Para elementos personalizados, se debe utilizar el atributo IS:
<table> <tr is = "my-component"> </tr> </table>
`` no se puede usar en ``, `` en este momento, `` `` `` `` `` `` `` `` `` `` `` `
Puede haber múltiples ``:
<Table> <tbody v-For = "items in items"> <tr> incluso fila </tr> <tr> impar-file </tr> </tbody> </table>
Accesorios
Pasar datos utilizando accesorios
El alcance de las instancias de componentes está huérfano. Esto significa que los datos del componente principal no pueden ni deben referenciarse directamente dentro de la plantilla del componente infantil. Puede usar accesorios para pasar datos a los componentes infantiles.
"Prop" es un campo de datos de componentes que se espera que se transmita desde el componente principal. Los componentes infantiles deben declarar explícitamente accesorios con la opción de accesorios:
Vue.component ('child', {// declara accesorios de accesorios: ['msg'], // prop se puede usar en plantillas // puede usar `this.msg` para establecer la plantilla: '<span> {{msg}} </span>'})Luego pase una cadena normal:
<child msg = "¡Hola!"> </kil>
Barra de joroba vs. horizontal
Los atributos HTML son insensibles a los casos. Cuando se usa un accesorio con el nombre de Camelcase como característica, debe convertirse en Kebab-Case (líneas horizontales cortas separadas):
Vue.component ('Child', {// Camelcase en JavaScript Props: ['MyMessage'], Template: '<span> {{MyMessage}} </span>'}) <!-Kebab-Case en Html-> <Child My-Message = "Hola!"> </fil>Accesorios dinámicos
Similar al uso de vínculos V para unir los atributos HTML a una expresión, también puede usar V-Bind para unir los accesorios dinámicos a los datos del componente principal. Cada vez que cambia los datos del componente principal, también se transmiten al componente infantil:
<Div> <input v-Model = "Parentmsg"> <br> <Child V-Bind: my-Message = "Parentmsg"> </kild> </div>
Usar la sintaxis de abreviatura de `v-bind` es generalmente más simple:
<Child: my-Message = "Parentmsg"> </ Child>
Sintaxis literal frente a sintaxis dinámica
Un error común para principiantes es pasar valores numéricos utilizando sintaxis literal:
<!-pasó una cadena "1"->
<Comp Some-ProP = "1"> </pp>
Debido a que es un accesorio literal, su valor se pasa en la cadena `" 1 "` en lugar del número real. Si desea pasar un número real de JavaScript, debe usar sintaxis dinámica para que su valor se calcule como una expresión de JavaScript:
<!-Pase el número real->
<comp: some-prop = "1"> </pp>
Tipo de enlace de apoyo
El PROP es unidireccional de forma predeterminada: cuando las propiedades del componente principal cambian, se pasará al componente infantil, pero al revés no lo hará. Esto es para evitar que el componente infantil modifique accidentalmente el estado del componente principal; esto hará que el flujo de datos de la aplicación sea difícil de entender. Sin embargo, también es posible forzar explícitamente vinculación bidireccional o de tiempo único utilizando el modificador de enlace .sync o .on:
Sintaxis comparativa:
<
La unión bidireccional sincroniza el atributo MSG del componente infantil al atributo Parentmsg del componente principal. La unión única no sincronizará los cambios después de la creación.
Tenga en cuenta que si el Prop es un objeto o una matriz, se pasa por referencia. Modificarlo dentro de un componente infantil afectará el estado del componente principal, independientemente del tipo de enlace utilizado.
Verificación de proporción
Los componentes pueden especificar los requisitos de verificación para los accesorios. Esto es útil cuando los componentes se dan a otros, porque estos requisitos de verificación forman la API del componente, asegurando que otros usen el componente correctamente. En este momento, el valor de los accesorios es un objeto que contiene requisitos de verificación:
Vue.component ('Ejemplo', {props: {// Detection de tipo básico (`null` significa que cualquier tipo está bien) propa: numin devuelto por una función a propd: {type: object, default: function () {return {msg: 'hello'}}}, // especifique este prop. (Nuevo en 1.0.12) // Convertir el valor antes de configurar el valor propg: {coerce: function (val) {return val + '' '// Convertir el valor en una cadena}}, proph: {coerce: function (val) {return json.parse (val) // Convertir la cadena JSON a un objeto}}}))El tipo puede ser el siguiente constructor nativo:
•Cadena
•Número
• booleano
•Función
•Objeto
•Formación
El tipo también puede ser un constructor personalizado que utiliza la detección de instancias.
Cuando la verificación del apoyo falla, Vue se niega a establecer este valor en el componente infantil, y se lanzará una advertencia si se utiliza la versión de desarrollo.
Comunicación de componentes entre padres e hijos
Enlace de padres
Un componente infantil puede acceder a su componente principal con este. $ Parent. Los descendientes de la instancia raíz pueden acceder a él con esto. $ Root. El componente principal tiene una matriz.
Aunque se puede acceder a cualquier instancia en la cadena principal, los componentes infantiles deben evitar confiar directamente en los datos del componente principal e intentar usar accesorios para pasar datos explícitamente. Además, es muy malo modificar el estado del componente principal en un componente infantil porque:
1. Esto permite que el componente principal esté estrechamente junto con el componente infantil;
2. Si solo observa el componente principal, es difícil entender el estado del componente principal. ¡Porque puede ser modificado por cualquier componente infantil! Idealmente, solo el componente puede modificar su estado mismo.
Eventos personalizados
La instancia VUE implementa una interfaz de evento personalizada para la comunicación en el árbol de componentes. Este sistema de eventos es independiente de los eventos DOM nativos y lo utiliza de manera diferente.
Cada instancia de Vue es un activador de eventos:
• Use $ on () para escuchar eventos;
• Use $ emit () para activar un evento;
• Use $ Dispatch () para distribuir eventos, y los eventos burbujean a lo largo de la cadena principal;
• Use $ Broadcast () para transmitir eventos, y los eventos se transmiten hacia abajo a todos los descendientes.
A diferencia del evento DOM, el evento VUE detiene automáticamente la burbuja después de que la primera devolución de llamada se activa durante el proceso de burbujas, a menos que la devolución de llamada devuelva explícitamente verdadero.
Ejemplo simple:
<!-plantilla de componentes infantiles-> <plantplate id = "child-template"> <input v-model = "msg"> <button v-on: click = "notify"> Enviar evento </boton> </template> <!-Plantilla de componentes parentales-> <Div Id = "Events-Expleamper"> <p> Mensajes: {{{{{{{{{{{Messages | JSON}} </p> <Child> </Child> </div> // Registre el componente infantil // Envía el mensaje actual Vue.component ('Child', {Template: '#Child-Template', data: function () {return {msg: 'hola'}}, métodos: {notificar: function () {if (this.msg.trim ()) {) this. $ statts ('child-msg', this.msg) this.msg = '' '}}}}) // Inicializar el componente principal // Presione el evento en una matriz cuando el mensaje se recibe var platar = new Vue ({el:'#eventos-exposición ', datos: {mensajes: []}, // Cuando crea una instancia de `` eventos `simply` $ en `$ en` `eventos` {{' (msg) {// La devolución de llamada `this` en el evento se une automáticamente a la instancia donde está registrada this.messages.push (msg)}}})Use V-On para vincular eventos personalizados
El ejemplo anterior es muy bueno, pero no podemos ver intuitivamente dónde proviene el evento "Child-MSG" del código del componente principal. Sería mejor si declaramos el controlador de eventos donde se usan subcomponentes en plantillas. Para estos subcomponentes, puede usar V-ON para escuchar eventos personalizados:
<Child V-on: child-msg = "handleit"> </child>
Esto deja en claro: cuando el componente infantil desencadena el evento "Child-MSG", se llamará al método 'HandleIT` del componente principal. Todo el código que afecta el estado del componente principal se coloca en el método 'HandleIT` del componente principal; El componente infantil solo se centra en el evento desencadenante.
Índice de subcomponente
A pesar de los accesorios y eventos, a veces todavía es necesario acceder a los componentes infantiles directamente en JavaScript. Para este propósito, puede usar V-REF para especificar una ID de índice para el componente infantil. Por ejemplo:
<div id = "parent"> <user-profile v-ref: perfil> </serprofile> </div> var parent = new vue ({el: '#parent'}) // Access componente infantil var child = parent. $ refsfileCuando V-REF y V-FOR se usan juntos, REF es una matriz u objeto que contiene los componentes infantiles correspondientes.
Use la ranura para distribuir contenido
Al usar componentes, a menudo debe combinarlos así:
<pp> <pp-header> </app-header> <pp-footer> </app-footer> </pp>
Nota dos puntos:
1. El componente <pp> no sabe qué contenido estará en su punto de montaje. El contenido del punto de montaje está determinado por el componente principal de <pp>.
2. Es probable que el componente <pp> tenga su propia plantilla.
Para que se combinen los componentes, necesitamos una forma de mezclar el contenido del componente principal con la plantilla del componente infantil. Este procesamiento se llama distribución de contenido (o "traducción" si está familiarizado con Angular). Vue.js implementa una API de distribución de contenido que se refiere al borrador de especificación de componente web actual y utiliza un elemento <slot> especial como una ranura para el contenido original.
Alcance de compilación
Antes de sumergirnos en la API de distribución de contenido, primero aclaramos el alcance de la compilación de contenido. Suponga que la plantilla es:
<Componente infantil>
{{msg}}
</infancia-componente>
¿Debería MSG estar vinculado a los datos del componente principal o los datos vinculados al componente infantil? La respuesta es el componente principal. El alcance del componente es simplemente:
El contenido de la plantilla del componente principal se compila dentro del alcance del componente principal; El contenido de la plantilla de componente infantil se compila dentro del alcance del componente infantil
Un error común es tratar de unir una directiva a las propiedades/método de un componente infantil dentro de la plantilla del componente principal:
<!-Inválido->
<Child-Component v-show = "SomechildProperty"> </fild-component>
Suponiendo que SomechildProperty es una propiedad de un componente infantil, el ejemplo anterior no funcionará como se esperaba. La plantilla del componente principal no debe conocer el estado del componente infantil.
Si desea unir instrucciones en un subcomponente al nodo raíz de un componente, debe hacerlo en su plantilla:
Vue.component ('Child-Component', {// funciona porque está en la plantilla de alcance correcta: '<div v-show = "somechildproperty"> niño </div>', data: function () {return {somechildproperty: true}}})Del mismo modo, el contenido de distribución se compila dentro del alcance del componente principal.
Ranura única
El contenido del componente principal se descartará a menos que la plantilla del componente infantil contenga <slot>. Si la plantilla del componente infantil tiene solo una ranura sin características, se insertará todo el contenido del componente principal donde está la ranura y la reemplazará.
El contenido de la etiqueta <slot> se considera contenido de reversión. El contenido de retroceso se compila dentro del alcance del componente infantil, y el contenido respaldo se muestra cuando el elemento host está vacío y no hay contenido de inserción.
Suponga que el componente My-Component tiene la siguiente plantilla:
<Viv> <h1> Este es mi componente! </h1> <slot> Si no hay contenido distribuido, me mostrará. </slot> </div>
Plantilla de componentes principales:
<My-component>
<p> Este es un contenido original </p>
<p> Este es un contenido más original </p>
</my-component>
Resultado de representación:
<Viv> <h1> Este es mi componente! </h1> <p> Este es un contenido original </p> <p> Este es un contenido más original </p> </div>
Ranura nombrada
El elemento <slot> se puede configurar con un nombre de característica especial para configurar cómo distribuir contenido. Múltiples ranuras pueden tener diferentes nombres. Una ranura con nombre coincidirá con elementos en el fragmento de contenido que tiene el atributo de ranura correspondiente.
Todavía puede haber una ranura anónima, que es la ranura predeterminada, como una ranura respaldada para fragmentos de contenido coincidentes que no se pueden encontrar. Sin una ranura predeterminada, estos fragmentos de contenido inigualables se descartarán.
Por ejemplo, supongamos que tenemos un componente de inserción múltiple con una plantilla como:
<Div> <slot name = "One"> </slot> <slot> </slot> <slot name = "two"> </slot> </div>
Plantilla de componentes principales:
<Multi-Insertion> <p slot = "one"> one </p> <p slot = "two"> two </p> <p> predeterminado a </p> </sli-inserción>
El resultado de renderizado es:
<div> <p slot = "one"> one </p> <p> predeterminado a </p> <p slot = "two"> two </p> </div>
La API de distribución de contenido es un mecanismo muy útil al combinar componentes.
Componentes dinámicos
Múltiples componentes pueden usar el mismo punto de montaje y luego cambiar dinámicamente entre ellos. Use el elemento <componente> reservado para unir dinámicamente a su propiedad IS:
New Vue ({El: 'Body', Data: {CurrentView: 'Home'}, Components: {home: {/ * ... */}, publicaciones: {/ * ... */}, Archive: {/ * ... */}}}) <Componente: IS = "CurrentView"> <!-El componente cambia cuando v.CurrentView Changes-> <</componente>Mantener alivado
Si el componente interrumpido se mantiene en la memoria, se puede retener o volver a renderizar. Para hacer esto, puede agregar un parámetro de directiva Keep-Alive:
<Componente: IS = "CurrentView" Keep-Alive>
<!-Los componentes inactivos serán almacenados en caché->
</componente>
Activar gancho
Al cambiar los componentes, cortar componentes puede requerir algunas operaciones asincrónicas antes de cortarlos. Para controlar la duración de la conmutación de componentes, agregue un gancho de activación al componente de corte:
Vue.component ('activate-example', {activate: function (done) {var self = this loadDataAsync (function (data) {self.somedata = data done ()})}})Tenga en cuenta que el gancho de activación solo actúa durante la conmutación de componentes dinámicos o la representación de inicialización de componentes estáticos, y no actúa en inserción manual utilizando métodos de instancia.
modo de transición
La función de modo de transición se usa para especificar cómo transmiten dos componentes dinámicos.
Por defecto, ingrese y deje transición sin problemas. Esta característica puede especificar otros dos modos:
• In-Out: el nuevo componente primero se transforma, y después de completar su transición, el componente actual pasará.
• Fuera: el componente actual primero pasa, y después de completar su transición, el nuevo componente se transforma al proceso.
Ejemplo:
<
Misceláneas
Componentes y V-for
Los componentes personalizados pueden usar V-FOR directamente como elementos normales:
<my-component v-For = "elemento en elementos"> </my-component>
Sin embargo, los datos no se pueden pasar a un componente porque el alcance del componente está huérfano. Para pasar datos a los componentes, se deben usar accesorios:
<mi componente
V-For = "Artículo en elementos"
: elemento = "item"
: index = "$ index">
</my-component>
La razón por la cual el elemento no se inyecta automáticamente en el componente es que esto hace que el componente esté estrechamente acoplado a la corriente V-FOR. Declare explícitamente de dónde provienen los datos y se pueden reutilizar en otro lugar para los componentes.
Escribir componentes reutilizables
Al escribir componentes, es beneficioso recordar si reutilizar los componentes. No hay nada que ver con el acoplamiento apretado de los componentes desechables a otros componentes, pero los componentes reutilizables deberían definir una interfaz pública clara.
La API del componente Vue.js proviene de tres partes: Prop, eventos y ranura:
• El PROP permite que el entorno externo pase datos a los componentes;
• Los eventos permiten que los componentes activen acciones en el entorno externo;
• La ranura permite al entorno externo insertar contenido en la estructura de vista del componente.
Usando la sintaxis de abreviatura de vínculo V y V-ON, la sangría de la plantilla es clara y concisa:
<mi componente
: foo = "baz"
: bar = "qux"
@event-a = "dothis"
@event-b = "dothat">
<!-Contenido->
<img slot = "icon" src = "...">
<p slot = "main-text"> ¡Hola! </p>
</my-component>
Componentes asincrónicos
En aplicaciones grandes, es posible que necesitemos dividir la aplicación en piezas pequeñas y descargarla del servidor solo si es necesario. Para facilitar las cosas, Vue.js permite que el componente se define como una función de fábrica, analizando dinámicamente la definición del componente. Vue.js solo desencadena la función de fábrica cuando el componente necesita ser representado, y almacena el resultado para una re-renderización posterior. Por ejemplo:
Vue.component ('async-example', function (resolve, rechazar) {setTimeout (function () {resolve ({plantplate: '<div> soy async! </div>'})}, 1000)})La función de fábrica recibe una devolución de llamada de resolución, llamada cuando se recibe una definición de componente descargada del servidor. También puede llamar a rechazar (razón) para indicar que la carga ha fallado. Aquí, SetTimeOut es solo para la demostración. Depende completamente de usted obtener los componentes. Función de segmentación de código recomendado con Webpack:
Vue.component ('async-webpack-example', function (resolve) {// Esta sintaxis especial de requisito especial le dice a WebPack // divide automáticamente el código compilado en diferentes bloques, // estos bloques se descargarán automáticamente a través de la solicitud Ajax. Requerir (['./ my-async-component'], resuelto)})Convención de nombres de recursos
Algunos recursos, como componentes y directivas, aparecen en plantillas como atributos HTML o elementos personalizados HTML. Debido a que los nombres de los atributos HTML y los nombres de etiquetas no son sensibles a las casos, el nombre del recurso generalmente debe usar la forma de Kebab-Case en lugar de CamelCase, que no es muy conveniente.
Vue.js admite el nombre de los recursos en forma de Camelcase o Pascalcase y los convierte automáticamente en Kebab-Case en la plantilla (similar a la convención de nombres de Prop):
// en Componente Definición de componentes: {// Registre myComponent con CamelCase Form: {/ *... */}} <!-Usando el formulario Kebab-Case en plantillas-> <MyComponent> </myComponent> ES6 Objectal Abreviation también está bien: // PascalcasePort Textbox de './Compone './Components/dropdown-menu';export predeterminado {componentes: {// escribe <Ext-Box> y <dotdown-Menu> TextBox, DropdownMenu}}Componentes recursivos
Los componentes pueden llamarse a sí mismos recursivamente dentro de sus plantillas, pero solo si tiene la opción Nombre:
var stackoverflow = vue.extend ({name: 'stack-overflow', plantlate: '<div>' + // llámalo recursivamente por su propia '<tack-overflow> </tack-overflow>' + '</div>'})El componente anterior causará un error "Tamaño máximo de la pila excedido", así que asegúrese de que la llamada recursiva tenga una condición de terminación. Cuando un componente se registra a nivel mundial usando Vue.component (), la ID de componente se establece automáticamente en la opción Nombre del componente.
Instancia de fragmento
Al usar la opción de plantilla, el contenido de la plantilla reemplaza el elemento de montaje de la instancia. Por lo tanto, los elementos de nivel superior de la plantilla recomendada son siempre elementos individuales.
No escribas la plantilla así:
<div> nodo raíz 1 </div>
<div> nodo raíz 2 </div>
Se recomienda escribir esto:
<div>
¡Tengo un solo nodo raíz!
<div> nodo 1 </div>
<div> nodo 2 </div>
</div>
Las siguientes situaciones convertirán la instancia en una instancia fragmentada:
1. La plantilla contiene múltiples elementos de nivel superior.
2. La plantilla solo contiene texto normal.
3. La plantilla solo contiene otros componentes (otros componentes pueden ser una instancia de fragmento).
4. La plantilla contiene solo una directiva de elementos, como <cartial> o <router-view> de Vue-Router.
5. El nodo de raíz de plantilla tiene una instrucción de control de proceso, como V-IF o V-For.
Estos casos permiten que la instancia tenga un número desconocido de elementos de nivel superior, que tratarán su contenido de DOM como un fragmento. La instancia de fragmento aún representa el contenido correctamente. Sin embargo, no tiene un nodo raíz, sus puntos $ EL a un nodo de anclaje, es decir, un nodo de texto vacío (un nodo de comentarios en modo de desarrollo).
Pero lo más importante, se ignorarán las instrucciones de control sin procesos, las características que no son PROP y las transiciones en los elementos de los componentes porque no hay un elemento raíz para la unión:
<!-No, porque no hay elemento raíz->
<Ejemplo v-show = "ok" transition = "fade"> </sample>
<!-Props sí->
<Ejemplo: prop = "somedata"> </scample>
<!-El control del proceso está bien, pero no hay transición->
<Ejemplo v- if = "ok"> </sample>
Por supuesto, las instancias de fragmentos tienen sus usos, pero generalmente es mejor darle al componente un nodo raíz. Asegura que las instrucciones y el rendimiento especial en los elementos de los componentes se conviertan correctamente, y el rendimiento también es ligeramente mejor.
Plantillas en línea
Si un componente infantil tiene la propiedad en línea de plantilla, el componente tratará su contenido como su plantilla en lugar de tratarlo como su contenido de distribución. Esto hace que la plantilla sea más flexible.
<My-component in en línea>
<p> Estos se compilan como la plantilla propia del componente </p>
<p> no es el contenido de traducción de los padres. </p>
</my-component>
Sin embargo, la plantilla en línea hace que el alcance de la plantilla sea difícil de entender y no puede almacenar en caché los resultados de la compilación de la plantilla. Una mejor práctica es usar la opción de plantilla para definir plantillas dentro de un componente.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.