Uso básico de la componentización
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>`
})
// 2.注册组件
Vue.component("my-cpn", cpnC)
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1. ¿Qué es la componentización?
Mi comprensión personal es eliminar una parte del código en caso de que se llame en otro lugar. Cualquiera que haya estudiado la orientación a objetos debe saber que el código repetido debe encapsularse. Esto también es similar. Por ejemplo, si una barra de navegación está encapsulada en un componente, la barra de navegación debe llamar a varias páginas. Dos ventajas principales del desarrollo en componentes:
- La clasificación es clara, lo que es conveniente para la gestión y el mantenimiento.
- Se soluciona el problema del código repetido, por lo que el código se puede reutilizar en cualquier momento.
2. Pasos de desarrollo de componentes
- Use Vue.extend () para crear un objeto constructor de componentes
- Utilice Vue.component () para registrar componentes
- Utilizar componentes
El código detallado es el siguiente:
<!-- 1.创建组件构造器对象 -->
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
`
})
<!-- 2.注册组件 -->
Vue.component("my-cpn", cpnC)
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
Las representaciones son las siguientes:
Componentes globales y componentes locales
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>全局组件和局部组件都使用我了</p>
</div>`
})
// 2.1.注册全局组件(意味着可以在多个Vue的实例下使用)
Vue.component('cpn', cpnC)
// 2.2.注册局部组件
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
// cpn是使用组件时的标签名
cpn: cpnC
}
})
const app2 = new Vue({
el: "#app2",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1. La diferencia entre componentes globales y componentes locales
- Los componentes globales se pueden usar en todas las instancias de Vue
- Los componentes locales solo se pueden usar en la instancia de Vue del componente registrado actualmente
2. Cómo registrar componentes globales y componentes locales
- Los componentes globales se registran con Vue.component () y luego se pueden usar en todas las instancias de Vue
- Los componentes locales se registran con los componentes del componente actual
En el código anterior, los componentes globales y los componentes locales se utilizan al mismo tiempo. Las representaciones son las siguientes:
Componentes padre e hijo
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件构造器(子组件)
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容111</p>
<p>我是内容111</p>
</div>`
})
// 2.创建第二个构造器(父组件)
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容222</p>
<p>我是内容222</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC1
}
})
// root组件(可以看作是一个组件))
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
cpn2: cpnC2
}
})
</script>
</body>
</html>
1. La relación entre los componentes principal y secundario
- La persona que llama es el componente principal
- El destinatario es un componente secundario
2. La relación de código anterior
- <cpn1> </cpn1> no está registrado en root en este momento, no se pueden usar todos
- La instancia de Vue no conoce la existencia de cpn1 en absoluto. Una vez que se completa el análisis de cpn2, todo se entrega a la instancia de vue
- Similar a Matryoshka
Las representaciones son las siguientes:
Escritura separada de plantillas de componentes
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn2></cpn2>
</div>
<!-- 1.通过script标签来定义template，但是类型必须是type="text/x-template" -->
<script type="text/x-template" id="cpn">
<div>
<h2>我是通过script标签定义的</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
</script>
<!-- 2.通过template标签即可，同样只要使用id绑定 -->
<template id="cpn2">
<div>
<h2>我是通过template标签定义的</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.注册全局组件
Vue.component("cpn", {
template: "#cpn" })
Vue.component("cpn2", {
template: "#cpn2" })
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1. ¿Qué es la separación de plantillas?
Estuve preparando cerveza durante medio mes y finalmente quise escribir algunas líneas de código. Todavía me torturaste así. No es que no quiera aprenderlo, pero Dios no me deja aprenderlo ... La solución es que podemos escribir la plantilla en html y el código es efectivo, este es el caso, parece un poco mejor.
2. Cómo utilizar las plantillas
Cada componente tiene un atributo de plantilla, siempre que vincule la identificación como desee.
Vue.component("cpn", {
template: "#cpn" })
Vue.component("cpn2", {
template: "#cpn2" })
3. Dos plantillas para que elijas
- Definir plantilla a través de la etiqueta de secuencia de comandos
- Utilice la etiqueta de la plantilla directamente
Problema de almacenamiento de datos en componentes
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<!-- 组件不可以访问vue实例中的变量 -->
<template id="cpn">
<div>
<h2>{
{title}}</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 1.注册一个全局组件
Vue.component("cpn", {
template: "#cpn",
data() {
return {
title: "我是定义在组件中的"
}
}
})
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
</html>
1. Relación de datos de componentes
El componente secundario y el componente principal son dos personas independientes. El componente principal tiene su propia variable de datos y el componente secundario también tiene su propia variable de datos. La variable de datos del componente secundario se puede colocar en el mismo nivel que la plantilla. Preste atención a la variable principal del componente secundario Los componentes no se pueden usar directamente y, de manera similar, los subcomponentes variables de los componentes principales no se pueden usar directamente.
Vue.component("cpn", {
template: "#cpn",
data() {
return {
title: "我是定义在组件中的"
}
}
})
Grabe sus propias notas de estudio por primera vez. Si encuentra un problema, bienvenido a dar sugerencias.