20-vue中 组件化 、组件之间的引用使用步骤、组件之间的通信(props)

一.
组件化思想：
  ①对网页进行组件拆分
  ②静态化组件：页面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>