Tabla de contenido
2. Llamada de componente global
2. Llamada de componente local
prefacio
¿Por qué vue se volvió popular y práctico hace unos años? Esto se debe principalmente a que una de las funciones más poderosas de Vue son los componentes de Vue. ¿Cuáles son las funciones poderosas de los componentes de Vue? Hay dos razones, una es la alta reutilización de los componentes, la otra es para reducir el desarrollo repetitivo.
¿Qué son los componentes? Un componente es una unidad de código compleja y reutilizable compuesta de elementos básicos, que es equivalente a una pieza de correo urgente. Estos códigos reutilizados se pueden encapsular para formar un componente que se puede llamar cuando sea necesario.
1. Componentes globales
1. Definición
La sintaxis del componente global es: vue.component('nombre del componente', {opciones de configuración});
Luego, comprendamos mejor cómo se debe definir el nombre del componente: la regla de definición para los nombres de los componentes es separar los nombres con guiones, letras minúsculas y también requerir un guión. Objeto de opciones de configuración: El objeto de la opción de configuración creada y la instancia de la configuración creada por new Vue reciben el mismo objeto de opción.Estas propiedades del objeto incluyen: datos, computado, métodos, etc.
Un precio de grupo puede predefinir muchas opciones, el núcleo son los siguientes dos
- plantilla de estructura
Esta plantilla declara el mapeo entre los datos y el DOM que finalmente se muestra al usuario. Pero debe tenerse en cuenta que en esta plantilla de estructura, solo puede haber un nodo raíz.
- datos iniciales
Los datos pueden definir los datos iniciales del componente, que es diferente de la definición de la opción de datos de newVue. El componente se puede reutilizar, por lo que los datos deben definirse como un estado de transición privado, los datos deben definirse como una función, y se debe devolver un objeto de función.
2. Llamada de componente global
Después de hablar de tantas cosas teóricas, puede que no entiendas, entonces vamos a codificar. Los componentes globales se pueden llamar globalmente, y el método de llamada es el mismo que el método de llamada de la etiqueta. Solo necesita cambiar el nombre de la etiqueta al nombre del componente.
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件</title>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<div id="app1">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('button-counter',{
template:`<button v-on:click="add">您在这里按下了{
{count}}次！</button>`,
data:function(){
return{
count:0
}
},
methods:{
add:function(){
this.count++
},
}
});
var vml = new Vue({
el:"#app",
})
var vm2 =new Vue({
el:"#app1",
})
</script>
</body>
</html>resultado de la operación:
En este código, el contador de botones ya es un componente global, que se puede montar y usar en vm1 y vm2, y se puede usar dentro de su alcance. Una vez que se define el componente, se puede usar desde varios esclavos. Los componentes se usan dos veces en el rango de montaje de la instancia vue vm1 y vm2, y los datos entre los componentes son independientes entre sí. No importa qué botón no se presione. , no se ven afectados entre sí.
2. Componentes locales
1. Definición
La definición de un componente local es: la definición de la instancia de vue, la definición de qué instancia se usa en el área donde se monta la instancia.
Con el componente del elemento de configuración, una instancia puede configurar varios componentes y varios componentes se configuran en un objeto. Un componente local solo se usa en el área definida en el montaje de su instancia, y el método invocado es exactamente el mismo que el método invocado por el componente global.
2. Llamada de componente local
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件</title>
</head>
<body>
<div id="app">
<!-- 头部，你随意定，你写中文拼音都可以 -->
<top></top>
<!-- 中部 -->
<middle></middle>
<!-- 尾部 -->
<bottom></bottom>
</div>
<div id="app1">
<top></top>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vml = new Vue({
el:"#app",
components:{
"top":{
template:`<div>
<h3>头部标题</h3>
<p>12121212</p>
</div>`
},
"middle":{
template:`<div>
<h3>中部题目</h3>
<p>10086</p>
</div>`
},
"bottom":{
template:`<div>
<h3>尾部题目</h3>
<p>欢迎来到丘比特的博客</p>
<p>QQ:2237814512</p>
</div>`
},
}
})
var vm2 =new Vue({
el:"#app1",
})
</script>
</body>
</html>resultado de la operación:
En el ejemplo, definimos tres componentes de la cabeza, el medio y la cola. Estos tres componentes se pueden usar en el área de #app montada por vm1, pero no en #app1. Podemos ver que los tres componentes llamados en el área #app montados por vm1 se pueden mostrar, pero el componente superior llamado en el área #app1 montado por vm2 no se representa Cuando abrimos la consola, podemos ver el error, en el elemento elemento Se puede ver el código interpretado.