Prefacio
La serie anterior de artículos:
- Capítulo 1-Uso del comando v
- Capítulo 1-Instrucciones personalizadas
- Capítulo 2-Propiedades computacionales
- Capítulo 2-Atributos de escucha
- Capítulo 2-Filtro
Vue tiene dos características principales
- Progresivo
- Componente
Progressive es el diseño subyacente de Vue. No nos importa primero. El capítulo 3 se centra en el uso de componentes. Al igual que las instrucciones y los filtros, los componentes se pueden dividir en componentes locales y componentes globales, y sus definiciones son similares.
Ejemplo básico
Antes de la introducción real component, permítanme presentarles Vue.extend (opciones de {Object}) . Vue.extend()Usando el constructor básico de Vue, cree una "subclase", el parámetro es un objeto que contiene opciones de componentes. La opción de datos es un caso especial, debe prestar atención, debe ser una función en Vue.extend (). Más adelante, presentaré por qué los datos aquí no son un objeto sino una función.
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{
{firstName}} {
{lastName}} aka {
{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#app')
</script>
</body>
<!--
渲染结果：
Walter White aka Heisenberg
-->
Creé uno arriba Vue.extend()y lo $mountmonté en el DOM, pero parece que solo se puede usar una vez de esta manera. Si usa componentes, no habrá tal problema, porque los componentes se pueden reutilizar.
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{
{firstName}} {
{lastName}} aka {
{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
// new Profile().$mount('#app')
Vue.component("my-component",Profile)
// 创建Vue实例
var app = new Vue({
el: '#app'
})
</script>
</body>
<!--
Walter White aka Heisenberg
Walter White aka Heisenberg
-->
Lo anterior es uno de los Vue.componentcomponentes más básicos que se usan para crear, lo que significa que se pueden usar en cualquier new Vue()plantilla de instancia raíz de Vue recién creada después del registro . En primer lugar, el primer parámetro es el nombre del componente que debemos definir. Este se puede nombrar con un guión (como en el ejemplo), o "denominación de caso de camello". Si se utiliza "denominación de caso de camello", entonces en el proceso de uso Debe cambiarse a la forma de un guión. Por supuesto, si está en la plantilla de cadena (la comilla inversa, `` seleccionada, como la plantilla de arriba), no existe tal restricción, como sigue:
<body>
<div id="app">
<p>+++++++++++</p>
<myComponent></myComponent>
<p>+++++++++++</p>
<my-component></my-component>
<p>+++++++++++</p>
<test></test>
<p>+++++++++++</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var Profile = Vue.extend({
template: '<p>{
{firstName}} {
{lastName}} aka {
{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
Vue.component("myComponent",Profile)
// 简写
Vue.component("test",{
template: '<myComponent></myComponent>',
})
new Vue({
el: '#app',
})
</script>
</body>
<!--
渲染结果：
+++++++++++
+++++++++++
Walter White aka Heisenberg
+++++++++++
Walter White aka Heisenberg
+++++++++++
-->
En el div se declaran tres componentes: el primero se denomina "caja camel", el segundo se denomina con un guión y el tercero se denomina "caja camel" en la plantilla de cadena. Según los resultados, podemos ver que el primero no se muestra y los demás se pueden mostrar con normalidad. En el componente de prueba recién definido, no hay declaración, Vue.extand()sino un objeto. De hecho, el último es una abreviatura del primero. Después de familiarizarse, puede declarar un componente global como este:
Vue.component('my-component-name', {
/* ... */ })
Registro parcial
<body>
<div id="app">
<profile></profile>
<my-com></my-com>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components:{
profile:{
template:`<h1>profile</h1>`
},
"my-com":{
template:`<h1>myComponent</h1>`
}
}
})
</script>
</body>
En la instancia de Vue, componentsse define un objeto de atributo, y lo Vue,extand()mismo, solo necesitamos implementar el componente en forma de objeto. Cabe señalar que el nombre del guión debe estar entre comillas.
Otros conocimientos
Es posible que haya notado que usar plantillas de cadenas para escribir html es realmente difícil de explicar. Vue también nos proporciona una nueva etiqueta <template></template>. Solo necesitamos especificar la identificación de la etiqueta de la plantilla y citarla directamente:
<!--html-->
<template id="html">
<div>
<p>大风起兮云飞扬</p>
<p>维加海内西归故乡</p>
</div>
</template>
<!--javascript-->
Vue.component("my-template",{
template: "#html"
})
Vale la pena señalar que si hay varias etiquetas en la plantilla, debe envolverla con una etiqueta y luego escribirla dentro, como se indicó anteriormente <div></div>.
¿Qué sucede si desea controlar la conmutación (visualización | desaparecer) de los dos componentes? Ciertamente, inconscientemente pensarás en usar if y mostrar dos instrucciones, lo que por supuesto está bien, pero Vue también proporciona un atributo is para que el componente logre este efecto. Por supuesto, el atributo is no es suficiente, debe usarse con la <component></component>etiqueta:
<body>
<div id="app">
<button @click="myButton">切换</button>
<keep-alive>
<component :is="componentName"></component>
</keep-alive>
</div>
<template id="template">
<div class="temp">
<h1>雕栏玉砌应犹在</h1>
<h2>雕栏玉砌应犹在</h2>
<h3>雕栏玉砌应犹在</h3>
</div>
</template>
<template id="footer">
<div>
<h1>只是朱颜改</h1>
<h2>只是朱颜改</h2>
<h3>只是朱颜改</h3>
<input type="checkbox">
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("my-component",{
template:"#template"
})
var app = new Vue({
el: '#app',
data: {
componentName:"my-component"
},
methods: {
myButton(){
this.componentName = this.componentName == "my-component" ? "my-footer" : "my-component"
}
},
components:{
"my-footer":{
template:"#footer"
}
}
})
</script>
</body>
El caso anterior puede ayudarnos a cambiar entre componentes, lo que significa que apunta al nombre del componente que queremos mostrar.
<keep-alive>
<component :is="componentName"></component>
</keep-alive>
Sin embargo, como se puede ver arriba <component></component>, hay una capa de etiqueta además de la etiqueta <keep-alive></keep-alive>, su función es guardar el estado. Se define una casilla de verificación en el componente de pie de página y se selecciona este botón de opción. Cuando se cambia el componente, si no hay una etiqueta de mantener vivo, el botón de opción no se seleccionará. Si desea mantener seleccionado, debe agregar una <keep-alive></keep-alive>etiqueta en la capa exterior .
para resumir
El componente es en realidad una Vue()instancia, pero esta instancia es un componente grande. Dado que la instancia es un componente, los objetos de atributo en la instancia también se pueden usar en el componente, como los métodos anteriores, calculado, reloj ..., excepto para los datos, que es una función en el componente, no un objeto. Debido a la reutilización de los componentes, si varios componentes declarados operan en el mismo dato en los datos, los datos se confundirán. Si usa funciones, los múltiples componentes declarados solo operarán con sus propios datos. Por ejemplo, si hay una manzana (datos en datos), hay varias personas (varios componentes). Anteriormente, varias personas tomaban esta manzana y luego se cambiaba a una función. Es equivalente a que una persona dé una manzana, y para evitar los celos, también pongo a una persona en una habitación, para que solo yo sepa qué hacer con esta manzana.