【Vue基础九】--父子组件传值

1-1 父组件传给子组件

1. 父组件

       <Student name="李四"  :age="18"></Student>
   

2. 子组件

   <template>
   <!-- // 组件的结构 -->
    <div>
       <h2>学生姓名：{{name}}</h2>
       <h2>学生年龄：{{age+1}}</h2>
     </div>
   </template>
     
   
   <script>
   // 组件交互相关的代码(数据、方法)
       export default{
           // name: 'Student',
           data() {
               return {
                   // name: 'aaa',
                   // age: 18
               }
           },
           // 接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
           props: [
               name: {
               	type: String，  // name的类型是字符串
               	requird:true    // name是必要的
               },
           	age: {
               	type: Number，  // name的类型是字符串
                   default: 99    // name是必要的
               }
           ]，
           // props: ['name','age']
       }
   </script>
   

1-2 子组件 ===> 父组件

1-2-1 通过父组件给子组件绑定一个组件自定义事件实现：子向父传递数据

1-2-1-1 绑定

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

   • 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

   • 第二种方式，在父组件中：

   <Demo ref="demo"/>
   ......
   mounted(){
      this.$refs.xxx.$on('atguigu',this.test)
   }
   

   • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

1-2-1-2 解绑

1. 触发自定义事件：this.$emit('atguigu',数据)
2. 解绑自定义事件this.$off('atguigu')
3. 组件上也可以绑定原生DOM事件，需要使用native修饰符。
4. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

1-2-1-3 使用案例

1. 父组件APP.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <!-- 通过父组件给子组件绑定一个子当以事件实现：子向父传递数据 -->
    <!-- <Student v-on:atg="getStudentName"></Student> -->
    <Student ref="student" @demo="m1"></Student>
  </div>
</template>

<script>
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    Student,
  },
  data() {
    return {
      msg: "你好啊！",
    };
  },
  methods: {
    getStudentName(name) {
      console.log(name);
      // console.log('demo');
    },
    m1() {
      console.log("demo被触发了，m1被调用了");
    },
  },
  mounted() {
    this.$refs.student.$on("atg", this.getStudentName);
    this.$refs.student.$once("atg", this.getStudentName); // 绑定自定义事件（一次性）
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 子组件Student.vue

<template>
 <div>
   <h2>学生姓名：{{name}}</h2>
  <h2>学生年龄：{{age}}</h2>
  <button @click="sendStudentName">把学s生名传递给APP组件</button>
  <button @click="unbind">解绑atg事件</button>
 </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'hhh',
      age: 12
    }
  },
  methods: {
    sendStudentName() {
      // 触发student实例身上的atg事件
      this.$emit('atg',this.name)
      this.$emit('demo')
    },
    unbind() {
      // this.$off('atg')  // 解绑一个自定义事件
      this.$off(['atg','demo'])    // 解绑多个自定义事件
    },
    death() {
      this.$destroy()   // 销毁了当前student组件，销毁后所有Student实例的自定义事件都被销毁了
    }
  }
}
</script>

<style>

</style>

3. 效果展示

1-2-2 通过父组件给子组件传递函数类型的props实现，子给父传递数据

1. 父组件App.vue

<template>
  <div id="app">
    <!-- 通过父组件给子组件传递函数类型的props实现： 子给父传递数据 -->
    <School :getSchoolName="getSchoolName"></School>
  </div>
</template>

<script>
import School from "./components/School.vue";

export default {
  name: "App",
  components: {
    School,
  },
  methods: {
    getSchoolName(name) {
      console.log("父组件APP收到子组件传来的学校名：", name);
    }
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 子组件School.vue

<template>
  <div>
     <h2>学校姓名：{{name}}</h2>
    <h2>学校年龄：{{age}}</h2>
    <button @click="sendSchoolName">把学校名传递给APP组件</button>
  </div>
</template>

<script>
export default {
  props: ['getSchoolName'],
  data() {
    return {
      name:'学校',
      age: 19
    }
  },
  methods: {
    sendSchoolName() {
      this.getSchoolName(this.name);
    }
  }
}
</script>

<style>

</style>

3. 展示效果