一.
组件化思想:
①对网页进行组件拆分
②静态化组件:页面html、css等拆分到各个组件中
③动态化组件:初始化数据 和 数据交互
注意:初始化数据:第一步初始化数据要考虑数据所放位置:哪个使用,放在哪个。 哪些使用,放在它们父组件上面。
数据交互:数据在哪个组件,更新数据的行为(方法)就应该定之在哪个组件
二.
1.组件之间的引用使用步骤
①引入子组件
②映射组件标签
③使用组件标签
2.组件之间的通信
组件间通信时,props接收数据 (①可以指定属性名和属性值的类型:用键值对形式;②只指定属性名:用数组形式;③接收函数属性时,要指定属性名/属性类型/必要性)
3.代码示例
组件:
<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>
子组件:
<template>
</template>
<script>
export default {
//接受父组件传过来的属性
props:{
//指定属性名和属性值的类型
comment: Object
}
//props: ["comment"] //只是指定属性名
//props 接收函数属性时,要指定属性名/属性类型/必要性。例如
//接收App.vue组件传来的函数属性addComment
//props:{
//addComment:{
//type:Function,
//required: true
}
}
</script>
<style>
</style>