Vue父子组件通信

子组件传值父组件：$emit父组件传值子组件：props

子组件传值父组件：$emit

原型：vm.$emit( eventName, […args] ) 参数： ● {string} eventName ● […args] 触发当前实例上的事件。附加参数都会传给监听器回调。

实例：

//子组件 <template> <div> <p style="color: red;font-size: 30px;">下面这是一个子组件</p> <!--当点击按钮时，会调用SonMethods方法--> <button @click="SonMethods">点一下就会把值给父组件</button> </div> </template> <script> //将子组件暴露出来 export default{ methods:{ SonMethods(){ //调用FSonMethod，从而将I am a son-component传回父组件 this.$emit('FSonMethod',"I am a son-component"); } } } </script> <style> </style> //父组件 <template> <div id="app"> <!--点击子组件的按钮->SonMethods->FSonMethod从而得到子数据->data输出参数--> <son @FSonMethod="data"></son> </div> </template> <script> //导入子组件来源 import son from './components/son.vue' export default{ name: 'app', //注册子组件 components:{son}, methods:{ data:function(data){ //在控制台输出子组件的数据 console.log(data); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; } </style>

如果是传回来多个参数： 子组件 methods:{ SonMethods(){ this.$emit('FSonMethod',"I am a first-son-component","I am a second-son-component"); } } 父组件 data:function(dataFist,dateSecond){ //在控制台输出子组件的数据 console.log(dataFist); console.log(dateSecond) }

注意事项：

1.this： 指向当前组件，也就是son 2.根目录： 组件只能有一个根目录，例如只能有一个div里面包含东西，不能并列两个div

父组件传值子组件：props

原型： props 类型： Array | Object

详细：

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

父组件 <template> <div id="app"> <son prop="Father-to-Son"></son> </div> </template> <script> //导入子组件来源 import son from './components/son.vue' export default{ name: 'app', //注册子组件 components:{son} } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; } </style> 子组件 <template> <div> <h>这是一个子组件，下面获取父组件传来的数据</h> <p>{{prop}}</p> </div> </template> <script> export default{ props:["prop"] } </script> <style> </style>