Vue2 组件传值

Vue2 组件传值 （用于学习笔记，后面在补）

• 子给父传递数据
  • 通过父组件给子组件传递函数类型的props实现：子给父传递数据
  • 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 $emit接收
• 父传子 props
• 父传孙
• bus传值
• refs传值

常用传值：父传子用prop，子传父用 $emit，兄弟组件传参用$bus。ref

点击下载此Demo完整代码
使用了nanoid，下载此Demo 需要下载依赖：npm i nanoid

1. 子给父传递数据

 以下的两种方式：

• 通过父组件给子组件传递函数类型的props实现：子给父传递数据
• 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据
  app.vue 父组件

<template>
  <div id="root">
    <!-- 练习小知识点专用组件 -->
    
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <lx-demo-school :getSchoolName="getSchoolName"></lx-demo-school>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <lx-demo-student v-on:haha="getStudentName"></lx-demo-student>
  </div>
</template>

<script>
// 练习小知识点专用组件
import LxDemoStudent from "./components/Lx/LxDemoStudent.vue";
import LxDemoSchool from "./components/Lx/LxDemoSchool.vue";

export default {
   
  name: "App",
  components: {
   
    // 练习小知识点专用组件
    LxDemoStudent,
    LxDemoSchool,
  },
  data() {
   
    return {
   };
  },
  methods: {
   
    // 以下是知识点练习的事件
    getSchoolName(name) {
   
      console.log("我是APP,收到了学校名：", name);
    },
    // 自定义事件
    getStudentName(name) {
   
      console.log("我是APP,收到了学生名：", name);
    },
  },
   
};
</script>
<style>
/*base*/
body {
   
  background: #fff;
}
</style>

LxDemoSchool.vue子组件

<template>
  <div class="lx-box">
    <h2>学校姓名：{
   {
    name }}</h2>
    <h2>学校性别：{
   {
    address }}</h2>
    <button @click="sendSchoolNameBtn">把学校名字给APP</button>
  </div>
</template>

<script>
export default {
   
  name: "school",
  data() {
   
    return {
   
      name: "月球",
      address: "北京",
    };
  },
  props: ["getSchoolName"],
  methods: {
   
    sendSchoolNameBtn() {
   
      this.getSchoolName(this.name);
    },
  },
};
</script>
<style scoped>
.lx-box {
   
  position: absolute;
  right: 10px;
  bottom: 180px;
  background: skyblue;
}
</style>

LxDemoStudent.vue子组件

<template>
  <div class="lx-box">
    <h2>学生姓名：{