vue2中父传子以及子传父的方式

在 Vue 中，父组件（App.vue）向子组件（School.vue）传递参数主要有两种方式，根据你的代码结构推荐以下实现方法：

方法一：通过 Props 传递（推荐）

这是 Vue 官方推荐的父子组件通信方式。

1. 修改 School.vue - 声明接收的 props：

<script>
export default {
  name: 'School',
  props: {
    // 声明接收的参数
    schoolName: {
      type: String,
      default: '默认学校名称'
    },
    schoolData: {
      type: Object,
      default: () => ({})
    }
  },
  // ...其他代码保持不变...
}
</script>

1. 修改 App.vue - 传递参数：

<template>
  <div>
    <!-- 通过 props 传递参数 -->
    <School 
      :school-name="appSchoolName" 
      :school-data="appSchoolData"
    />
    <Student/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      appSchoolName: '北京大学',
      appSchoolData: {
        location: '北京',
        established: 1898
      }
    }
  },
  // ...其他代码保持不变...
}
</script>

方法二：通过事件总线（当前代码已有实现）

你已经在代码中使用了 BaseDao 作为事件总线，可以这样实现：

1. 在 App.vue 中发送数据：

<script>
import BaseDao from "./utils/BaseDao";

export default {
  mounted() {
    // 发送数据到 School 组件
    BaseDao.$emit('lol', {
      name: '来自App的数据',
      age: 100,
      type: '学校信息'
    });
  }
}
</script>

2：在 School.vue 中接收（已有接收逻辑）：

<script>
export default {
  beforeCreate() {
    BaseDao.$on('lol', (data) => {
      this.lpl = data  // 会自动更新到模板
    })
  },
  // ...销毁时记得移除监听...
  beforeDestroy() {
    BaseDao.$off('lol')
  }
}
</script>

在Vue中，子组件（School.vue）向父组件（App.vue）传递数据通常有两种主要方式：

1. 使用自定义事件（$emit）

2. 使用事件总线（Event Bus）

方法一：自定义事件（$emit） - 最推荐

这是 Vue 官方推荐的父子组件通信方式，清晰且可维护。

School.vue (子组件) - 触发事件：

<script>
export default {
  methods: {
    test1() {
      // 触发自定义事件，传递数据
      this.$emit('school-data', this.dat)
    }
  }
}
</script>

App.vue (父组件) - 监听事件：

<template>
  <div>
    <!-- 监听自定义事件 -->
    <School @school-data="handleSchoolData"/>
    <Student/>
  </div>
</template>

<script>
export default {
  methods: {
    handleSchoolData(data) {
      console.log('收到来自School的数据:', data)
      // 在这里处理接收到的数据
    }
  }
}
</script>

完整示例（推荐的自定义事件方式）：

School.vue:

<template>
  <div class="School">
    <button @click="sendToParent">点击发送数据给App</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      schoolData: {
        name: '北京大学',
        location: '北京'
      }
    }
  },
  methods: {
    sendToParent() {
      this.$emit('school-info', this.schoolData)
    }
  }
}
</script>

App.vue:
 

<template>
  <div>
    <School @school-info="handleSchoolInfo"/>
    <p>收到学校数据: {{ receivedSchoolData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedSchoolData: null
    }
  },
  methods: {
    handleSchoolInfo(data) {
      this.receivedSchoolData = data
    }
  }
}
</script>