vue子组件和父组件通信

Vue子组件向父组件传值——$emit() 1、我们来看子组件

<template> <div class="home" v-title data-title="子组件"> <button @click="btn()">给父组件传递值</button> </div> </template> <script> export default { name: 'home', data () { return { msg:"我是子组件的msg" } }, methods:{ btn(){ this.$emit("func",this.msg) //func:是父组件指定的传数据绑定的函数，this.msg 需要传的数据 } } } </script>

2、我们再来看父组件

<template> <div class="home" v-title data-title="父组件"> <son @func="getmsg"></son> <div>{{father}}</div> </div> </template> <script> import son from "../son/index" export default { name: 'home', data () { return { father:"this is msg" } }, methods:{ getmsg(a){ this.father=a; console.log(a) } }, components:{ son } }

3、ojbk