1. A
ideia de componentização:
① Realizar página da webDivisão de componentes
②Componentes estáticos: página html, css, etc. são divididos em vários componentes.
③Componentes dinâmicos: inicializar dados e interação de dados.
Nota: Inicializar dados: A primeira etapa da inicialização de dados deve considerar a localização dos dados: quais são usados e quais. Quais são usados, coloque-os em cima de seus componentes principais.
Interação de dados: em qual componente os dados estão localizados, o comportamento (método) de atualização dos dados deve ser determinado em qual componente
2.
1. Etapas de referência entre os
componentes
①Introduzir o subcomponente ②Rótulo do componente do
mapa ③Uso do rótulo do componente
2. Comunicação entre os
componentes Ao comunicar-se entre os componentes,adereçosRecebendo dados (①O tipo de nome de atributo e valor de atributo podem ser especificados: na forma de pares chave-valor; ②Somente especificando o nome do atributo: na forma de array; ③Ao receber o atributo de função, especifique o nome do atributo / tipo de atributo / necessidade)
3.
Componentes da amostra de código :
<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>
Submontagem:
<template>
</template>
<script>
export default {
//接受父组件传过来的属性
props:{
//指定属性名和属性值的类型
comment: Object
}
//props: ["comment"] //只是指定属性名
//props 接收函数属性时，要指定属性名/属性类型/必要性。例如
//接收App.vue组件传来的函数属性addComment
//props:{
//addComment:{
//type:Function,
//required: true
}
}
</script>
<style>
</style>