Vue - 父子组件之间传值（v-bind / props、$emit / v-on）

一. 父组件向子组件传值

传值方法

1. 父组件：

   通过 v-bind 的形式进行传递
   例：通过 v-bind 属性把 pInfo 的值赋给 info 变量

   <child :info="pInfo"></child>
   

2. 子组件：

   2.1 props：接收父组件传递的值，可校验传递的数据

   校验属性
   type：限制传递的数据类型
   required：设置数据是否必传（true：是，false：否）
   default：设置默认值，若父组件未向子组件传递数据，使用此数据
   validator：自定义校验，例：父组件传递的数据长度必须大于 5

     props: {
       info: {
         type: String,
         required: true,
         validator:function(value){
         	return (value.length > 5)
         }
       }
     },
   

   2.2 通过watch侦听器，侦听父组件传递的值，实现动态传递数据

   监听父组件传回来的 info 数据
   当父组件传回来的数据发生改变时会执行侦听器中的方法

   watch: {
       //newValue 新数据（本次父组件传递的数据）
       //oldValue 旧数据（上一次父组件传递的数据）
       info(newValue, oldValue) {
         if (newValue) {
           //将新值赋值到data中
           this.infoText= newValue;
         }
       }
     },
   

传值实例

1. 简单使用父组件向子组件传值

   父组件代码

   <template>
     <div>
       <child :info="pInfo"></child>
     </div>
   </template>
   
   <script>
   //子组件地址（仅供参考），具体以实际项目目录地址为准
   import child from "./Child.vue";
   export default {
     components: {
       child: child
     },
     data() {
       return {
         pInfo: "父组件数据"
       };
     }
   };
   </script>
   
   <style scoped>
   </style>
   

   子组件代码

   <template>
     <div>
       <div>子组件接受父组件数据：{{ infoText }}</div>
     </div>
   </template>
   
   <script>
   export default {
     //接收父组件传递的数据
     props: {
       info: {
         type: String,
         required: true
       }
     },
     data() {
       return {
         infoText: ""
       };
     },
     mounted() {
       this.infoText = this.info;
     }
   };
   </script>
   
   <style scoped>
   </style>
   

2. 深入使用父组件向子组件传值，子组件动态获取父组件传值

   通过 实例1，我们会发现父组件向子组件传递不同数据的时候，子组件接收的数据一直是第一次获取到的，没有实现动态改变，相信很多人都遇到过这个问题。
   那么想要实现子组件动态接收父组件传递的数据，需要怎么解决呢？这个时候我们就需要用到了watch侦听器。

   父组件代码

   <template>
     <div>
       <button @click="toChild">向子组件传新值</button>
       <child :info="pInfo"></child>
     </div>
   </template>
   
   <script>
   //子组件地址（仅供参考），具体以实际项目目录地址为准
   import child from "./Child.vue";
   export default {
     components: {
       child: child
     },
     data() {
       return {
         pInfo: "父组件数据"
       };
     },
     methods: {
       toChild() {
         this.pInfo = "新的父组件数据";
       }
     }
   };
   </script>
   
   <style scoped>
   </style>
   

   子组件代码

   <template>
     <div>
       <div>子组件接受父组件数据：{{ infoText }}</div>
     </div>
   </template>
   
   <script>
   export default {
     //接收父组件传递的数据
     props: {
       info: {
         type: String,
         required: true
       }
     },
     data() {
       return {
         infoText: ""
       };
     },
     watch: {
       //newValue 新数据（本次父组件传递的数据）
       //oldValue 旧数据（上一次父组件传递的数据）
       info(newValue, oldValue) {
         if (newValue) {
           //将新值赋值到data中
           this.infoText = newValue;
         }
       }
     },
     mounted() {
       this.infoText = this.info;
     }
   };
   </script>
   
   <style scoped>
   </style>
   

二. 子组件向父组件传值

传值方法

子组件向父组件传值是通过方法传递的，也可以说是子组件调用父组件方法。

1. 子组件：

   通过 $emit() 向外触发父组件中方法，同时进行数据的传递
   例：通过 $emit 触发父组件中的received方法， msg 为子组件向父组件穿的数据

   const msg = "执行到了";
   this.$emit("received", msg);
   

2. 父组件：

   通过事件方法监听子组件的状态
   例：通过 v-on 方法监听hideDrawer方法

   <child @received="hideDrawer"></child>
   

传值实例

父组件

<template>
  <div>
    <h3>父组件</h3>
    <p>收到子组件数据：{{ cInfo }}</p>
    <hr />
    <h3>子组件</h3>
    <child @received="getChildInfo"></child>
  </div>
</template>

<script>
//子组件地址（仅供参考），具体以实际项目目录地址为准
import child from "./Child.vue";
export default {
  components: {
    child: child
  },
  data() {
    return {
      cInfo: ""
    };
  },
  methods: {
    getChildInfo(info) {
      this.cInfo = info;
    }
  }
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <button @click="handleBtn">向父组件传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleBtn() {
      const msg = "执行到了";
      this.$emit("received", msg);
    }
  }
};
</script>

<style scoped>
</style>