1. The
idea of componentization:
① Perform web pageComponent split
②Static components: page html, css, etc. are split into various components.
③Dynamic components: initialize data and data interaction.
Note: Initialize data: The first step of initializing data should consider where the data is placed: which one is used and which one is placed. Which ones are used, put them on top of their parent components.
Data interaction: In which component the data is located, the behavior (method) of updating the data should be determined in which component
2.
1. Reference steps between
components
①Introduce subcomponent ②Map component label
③Use component label
2. Communication between
components When communicating between components,propsReceiving data (①The type of attribute name and attribute value can be specified: in the form of key-value pairs; ②Only specifying the attribute name: in the form of array; ③When receiving the function attribute, specify the attribute name/attribute type/necessity)
3. Code sample
components:
<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>
Subassembly:
<template>
</template>
<script>
export default {
//接受父组件传过来的属性
props:{
//指定属性名和属性值的类型
comment: Object
}
//props: ["comment"] //只是指定属性名
//props 接收函数属性时，要指定属性名/属性类型/必要性。例如
//接收App.vue组件传来的函数属性addComment
//props:{
//addComment:{
//type:Function,
//required: true
}
}
</script>
<style>
</style>