Vue重点掌握知识点，组件间数据交互(父传子、子传父、兄弟交互)

父子组件传递

• 在写vue项目的时候，无论是父组件向子组件传递数据还是子组件向父组件传递数据，都是必须要掌握的；除此之外还有兄弟组件这种关系的组件之间的数据传递也是非常重要的，建议必须熟练掌握。
• 这篇介绍是基于你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它：[组件基础]

父组件向子组件传递(props）

props：父组件向子组件传递数据，通过props在子组件进行接收使用；props在接收父组件传递的数据时，可以有两种格式：数组、对象。如果你只需要简单接收没有任何别的需求可以直接使用数组形式，若你在接收时需要以哪种形式的数据类型进行接收推荐使用对象形式进行接收，此外对象类型还可以有默认值以及必填项的配置。

• 数组形式接收

 props: ["chuandi"]

• 对象形式接收

  props: {
   
    chuandi: {
   
      // 以哪种数据类型进行接收
      type: String,
      // 必填项校验,表示必须要传入这个参数，不管有没有默认值，否则会报错
      required: false,
      default: "",
    },
  },

注意：props在使用时是和data、methods同级的，不要写错位置了

父传子

传递数据代码是不分先后的，为了方便理解我把它分为几步拆开理解。

• 先在父组件内引入子组件，再注册组件、使用组件
  
• 在父组件内使用引入的子组件
  
• 在子组件身上通过v-bind绑定自定义的属性值，并把父组件数据赋值给这个属性值
  
• 在子组件接收并使用
  
• 在子组件内使用父组件传递来的数据
  
  拿到数据后的子组件
  
  props总结：到这里父组件向子组件传递数据的步骤全部走完，子组件成功拿到数据；并没有什么难点，但还是需要多写几