Un breve análisis de poderosos componentes Vue.js

¿Qué es un componente? Los componentes son 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.

¿Cómo registrar componentes?

Debe crear un componente utilizando el método Vue.extend y luego registrar el componente utilizando el método Vue.component. El formato del método vue.extend es el siguiente:

 var myComponent = vue.extend ({// opciones ... lo presentaré más tarde})

Si desea usar este componente creado en otro lugar, debe nombrarlo:

Vue.component ('my-component', mycomponent)

Después de nombrar, puede usar este nombre de componente en la etiqueta HTML, al igual que usar un elemento DOM. Echemos un vistazo a un ejemplo completo de registro y uso de componentes.

Código HTML:

 <div id = "Ejemplo"> <MyComponent> </component> </div>

Código JS:

 // Define var myComponent = vue.extend ({Template: '<iv> un componente personalizado! </div>'}) // registrar vue.component ('my-component', myComponent) // Crear instancia raíz nueva Vue ({el: '#Example'})

Resultado de salida:

 <div id = "Ejemplo"> <div> un componente personalizado! </div> </div

Componentes anidados

El componente en sí también puede contener componentes. El siguiente componente principal contiene un componente llamado componente infantil, pero este componente solo puede ser utilizado por los componentes principales:

 var child = Vue.extend({ template: '<div>A custom component!</div>'});var parent = Vue.extend({ template: '<div>Parent Component: <child-component></child-component></div>', components: { 'child-component': child }});Vue.component("parent-component", parent);

El proceso de definición anterior es bastante engorroso, y no necesita llamar a los métodos Vue.component y Vue.extend cada vez:

 // 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>'}})

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. Las columnas a continuación tienen tres componentes en casa, publicaciones y archivos instalados en la misma instancia de Vue, y cambiar dinámicamente la pantalla de componentes a través de la función CurrentView.

Código HTML:

 <div id = "Dynamic"> <Button ID = "Home"> Home </boton> <Button id = "Publica"> Publicar </Button> <Button ID = "Archive"> Archive </boton> <br> <componente: IS = "CurrentView"> </ componente> </div>

Código JS:

 var vue = new Vue ({el: "#Dynamic", Data: {currentView: "home"}, componentes: {home: {Template: "home"}, publica: {Template: "publica"}, Archive: {Template: "Archive"}}}); document.getEmementbyid ("home"). OnClick = function () "Home";}; document.getElementById ("publicaciones"). onClick = function () {vue.currentView = "publica";}; document.getElementById ("Archive"). OnClick = function () {Vue.CurrentView = "Archive";};

Componentes y V-for

<my-component v-For = "elemento en elementos"> </my-component>

Los datos no se pueden pasar a un componente porque el alcance del componente es independiente. 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.

Principio sensible

Cuando un componente une los datos, ¿cómo puede ser efectivo el enlace y puede modificar y agregar dinámicamente atributos? Eche un vistazo a la siguiente introducción de principios.

Cómo rastrear los cambios: pase un objeto diferente a la instancia de Vue como una opción a Data, Vue.js atravesará sus propiedades y lo convertirá en Getter/Setter con Object.DefineProperty. Esta es una característica ES5, y todo Vue.js no admite IE8 o más bajo.

Cada instrucción/enlace de datos en la plantilla tiene un objeto de observador correspondiente, que registra los atributos como dependencias durante el proceso de cálculo. Después de eso, cuando se llama al establecimiento dependiente, se activará el recalculación del observador. El proceso es el siguiente:

Problema de detección de cambios: Vue.js no puede detectar la adición o eliminación de las propiedades del objeto. Las propiedades deben estar en los datos para habilitar Vue.js para convertirlo en modo Getter/Setter para que responda. Por ejemplo:

 var data = {a: 1}; var vm = new vue ({data: data}); // `vm.a` y` data.a` ahora son receptivos vm.b = 2 // `vm.b` no es receptivo data.b = 2 //` data.b` no es receptiva no es receptiva no es receptiva

Sin embargo, hay formas de agregar atributos después de la creación de instancias y hacerlo correspondiente. Puede usar el método de instancia establecer (clave, valor):

vm. set ('b', 2)

// `vm.b` y` data.b` ahora responden

Para objetos normales, puede usar métodos globales: vue.set (objeto, clave, valor):

Vue.set (datos, 'c', 3)

// `vm.c` y` data.c` ahora responden

Inicializar datos: aunque Vue.js proporciona la adición dinámica de las propiedades correspondientes, se recomienda declarar todas las propiedades correspondientes en el objeto de datos.

No hagas esto:

 var vm = new Vue ({Template: '<div> {{msg}} </div>'}) // luego agregue `msg`vm. $ set ('msg', 'Hola!')

Esto debe hacerse:

 var vm = new Vue ({data: {// declarar `msg` msg: '' '}, plantate:' <div> {{msg}} </div> '}) // luego configure` msg`vm.msg =' ¡Hola! '

Caso completo del componente

Los ejemplos introducidos a continuación implementan la función de ventana modal y el código es relativamente simple.

Código HTML:

 < name = "Header"> encabezado predeterminado </lot> </div> <div> <!-slot es equivalente al tendente de posición del cuerpo-> <slot name = "cuerpo"> cuerpo predeterminado </lot> </div> <div> <!-slot es equivalente al marcador de pie-> <name de slot = "pie" pie predeterminado </slot> <button @click = "show =" falso " </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "app"> <!-Establezca el atributo de instancia VUE al hacer clic en el botón. El valor de ShowModal es verdadero-> <Button ID = "Show-Modal" @Click = "ShowModal = True"> Show Modal </boton> <!-Modal es un complemento personalizado. La característica del complemento muestra unir la función ShowModal de la instancia VUE-> <modal: show.sync = "showmodal"> <!-Reemplace el contenido de la ranura en el complemento modal y luego sea el encabezado-> <h3 slot = "encabezado"> encabezado personalizado </h3> </div> </div>

Código JS:

 // Definir un complemento con el nombre modalvue.component ("modal", {// La plantilla del complemento está vinculado al contenido del elemento DOM con la ID de la plantilla de template modal: "#modal-template", props: {// El tipo es boolean show: {type: boolean: requerido: verdadero, twoway: true}}}}); // Instanciar Vue, el alcance está bajo la identificación del elemento de la aplicación, new Vue ({el: "#App", Data: {// El valor predeterminado es falso showModal: false}});

Código CSS:

 .modal-mask {posición: fijo; Index Z: 9998; arriba: 0; Izquierda: 0; Ancho: 100%; Altura: 100%; Color de fondo: RGBA (0, 0, 0, .5); Pantalla: tabla; Transición: Opacidad .3S Ease;}. Modal-Wrapper {Display: Table-Cell; vertical-align: middle;}. modal-contener {ancho: 300px; Margen: 0px Auto; relleno: 20px 30px; Color de fondo: #fff; Border-Radius: 2px; Shadow de caja: 0 2px 8px RGBA (0, 0, 0, .33); Transición: todas las facilidad de .3s; Font-Family: Helvetica, Arial, Sans-serif;}. Modal-Header H3 {Margin-top: 0; color: #42B983;}. Modal-Body {margen: 20px 0;}. modal-default-button {float: right;}/** Los siguientes estilos se aplican automáticamente a elementos con los elementos con* v-transition = "modal" cuando su visibilidad se ve estilos.*/. Modal-Enter, .modal-leve {opacidad: 0;}. modal-entr. transformar: escala (1.1);}

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.

Como no he usado las funciones de los componentes en profundidad en el proyecto, no tengo una comprensión profunda de los componentes, y la introducción es relativamente superficial. Gracias por tu lectura.