vue父子组件之间传值，以及之间方法调用

该文章主要记录在工作中经常使用的小知识点、注意点、遇到的小问题

vue父子组件传值，调用方法

父传子值，父调用子方法

父组件向子组件传值（引入子组件→在引入的子组件绑定需要传送的值→子组件props接收）

<!-父组件---> <template>   <div>     <child :msg="msg"></child>   </div> </template>  <script> import child from './child' export default {   components:{     child   }   data () {     return {       msg: '父组件的值'     }   } }  <!-子组件---> <template>   <div></div> </template>  <script> export default {   props:{       msg:{           type:String,           default:''       }   }   mounted(){       console.log(this.msg)   } } 

父组件调用子组件方法（引入子组件→给注册的子组件注册引用信息→调用子组件方法）

<!-父组件---> <template>   <div>     <child ref="child" ></child>   </div> </template>  <script> import child from './child' export default {   components:{     child   }   mounted(){       this.$refs.child.getData() // 调用   } }  <!-子组件---> <template>   <div></div> </template>  <script> export default {   methods:{       getData(){           console.log('父组件调用了我的方法')       }   } } 

子传父值，子调用父方法

子组件向父组件传值（方法一）

<!-父组件---> <template>   <div>     <child @func="getData"></child>   </div> </template>  <script> import child from './child' export default {   components:{     child   }   mounted(){       getData(val){           console.log(val) //我是子组件的数据       }   } }  <!-子组件---> <template>   <div></div> </template>  <script> export default {     data(){         msg: "我是子组件的数据",     }     mounted(){         //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据         this.$emit('func', this.msg)      } } 

子组件向父组件传值（方法二）

父组件直接获取子组件里的data数据 this.$ref.child.msg 

子组件调用父组件方法（方法一）

子组件直接通过this.$parent.event调用 //event为需要调用的父组件的事件 

子组件调用父组件方法（方法二）

子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了（与子组件向父组件传值（方法一）一致） 

子组件调用父组件方法（方法三）

父组件把方法传入子组件中，在子组件里直接调用这个方法 <!-父组件---> <template>   <div>     <child :getData="getData"></child>   </div> </template>  <script> import child from './child' export default {   components:{     child   }   methods:{       getData(){         console.log('这是父组件的方法'）        }   } }  <!-子组件---> <template>   <div></div> </template>  <script> export default {   props:{       getData:{           type:Function,           default:null       }   }   mounted(){     if(this.getData){         this.getData()     }   } }