Vue2父传子、子传父和兄弟间互传

首先创建局部组件来完成之间的传值。

一、父组件给子组件传值

父类组件： 使用props属性，父组件向子组件传递数据。

<template>
  <div id="app">
    <div>
      <son-boy :obj="obj" :arr="arr"></son-boy>
    </div>
  </div>
</template>

<script>
import SonBoy from "./components/SonBoy.vue";
export default {
  name: "App",
  data() {
    return {
      obj: {name: "张三",age: 22,sex: "男"},
      arr: [1, 2, 3, 4, 5],
    };
  },
  components: {
    SonBoy,
  },
};
</script>
<style></style>

子类组件：

<template><!-- 父传子 -->
  <div>
    <h2>{
  { obj }}</h2>
    <h2>{
  {arr}}</h2>
  </div>
</template>
<script>
export default {
  name: "SonBoy",
  props: {
    obj:{
        type:Obj