1. La
idea de la componentización:
① Realizar página webDivisión de componentes
② Componentes estáticos: la página html, css, etc. se dividen en varios componentes
③ Componentes dinámicos: inicializar datos e interacción de datos
Nota: Inicializar datos: El primer paso para inicializar datos debe considerar la ubicación de los datos: cuál se usa y cuál. Cuáles se utilizan, colóquelos encima de sus componentes principales.
Interacción de datos: en qué componente se encuentran los datos, el comportamiento (método) de actualización de los datos debe determinarse en qué componente
2.
1. Consulte los pasos entre los
componentes
①Introduzca el subcomponente ②Mapee la etiqueta del
componente ③Use la etiqueta del componente
2. Comunicación entre
componentes Al comunicarse entre componentes,accesoriosRecepción de datos (①Se puede especificar el tipo de nombre de atributo y valor de atributo: en forma de pares clave-valor; ②Sólo especificando el nombre de atributo: en forma de matriz; ③Al recibir el atributo de función, especificar el nombre de atributo / tipo de atributo / necesidad)
3. Codifique los
componentes de la muestra :
<template>
<div>
<div class="container">
<!-- 使用组件标签 -->
<Add/>
<!-- 使用组件标签 组件间的通信：向子组件传递属性comments-->
<List :comments="comments"/>
</div>
</div>
</template>
<script>
// 引入vue组件
import Add from "./components/Add(left).vue"
import List from "./components/List(right).vue"
export default {
data() {
//data 里的数据声明方式
return {
}
},
//映射组件标签
components:{
Add,
List
},
}
</script>
<style>
</style>
Subconjunto:
<template>
</template>
<script>
export default {
//接受父组件传过来的属性
props:{
//指定属性名和属性值的类型
comment: Object
}
//props: ["comment"] //只是指定属性名
//props 接收函数属性时，要指定属性名/属性类型/必要性。例如
//接收App.vue组件传来的函数属性addComment
//props:{
//addComment:{
//type:Function,
//required: true
}
}
</script>
<style>
</style>