父与子组件通信：--子组件里面通过props接收父组件传过来的数据
1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
props:['title']
props:{
'title':String
}
子
Header.vue:
<template> <div> <h2>{{title}}</h2> <h2>{{homemsg}}</h2> <button @click="run('123')">执行父组件的方法</button> <button @click="getParent()">获取父组件的数据和方法</button> </div> </template> <script> export default { name: "Header", props:['title','homemsg','run','home'], methods:{ getParent(){ console.log('this.title:',this.title); console.log('this.home.title:',this.home.title); this.home.run('456') } } } </script> <style scoped> </style>
父
MyHome.vue:
<template> <div> <Header :title="title" :homemsg='msg' :run="run" :home="this"></Header> </div> </template> <script> import Header from "./Header"; export default { name: "MyHome", data(){ return{ msg:'我是一个home组件', title:'首页' } }, components:{ Header }, methods:{ run(data){ alert('我是Home组件的run方法'+data); } } } </script> <style scoped> </style>
父组件主动获取子组件的数据和方法：--$refs
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
父
<template> <div> <Header ref="header" :title="title" :homemsg='msg' :run="run" :home="this"></Header> <button @click="getChildData()">获取子组件的数据</button> <button @click="runChildMethod()">执行子组件的方法</button> </div> </template>
methods:{
//...
getChildData(){
alert(this.$refs.header.msg);
},
runChildMethod(){
this.$refs.header.getParent();
}
}
子组件主动获取父组件的数据和方法：$parent
this.$parent.数据
this.$parent.方法
子
<button @click="getParent2()">主动获取父组件的数据和方法</button>
methods:{
getParent2(){
console.log('$parent.msg:',this.$parent.msg);
this.$parent.run('aaaa');
}
}
非父子组件传值：$emit,$on
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){
})
New1.vue
<template> <div> New组件 <button @click="emitNew1()">New1发送广播数据</button> </div> </template> <script> import VueEvent from "../model/VueEvent"; export default { name: "New1", data(){ return{ msg:'我是New1组件' } }, methods:{ emitNew1(){ VueEvent.$emit('from-New1',this.msg); } }, mounted() { VueEvent.$on("from-Home1",function (data) { console.log("接受的消息",data) }); } } </script> <style scoped> </style>
Home1.vue
<template> <div> Home1组件 <button @click="emitHome1()">emitHome1发送广播数据</button> </div> </template> <script> import VueEvent from "../model/VueEvent"; export default { name: "Home1", data(){ return{ msg:'我是Home1组件' } }, methods:{ emitHome1(){ VueEvent.$emit("from-Home1",this.msg) } }, mounted() { VueEvent.$on("from-New1",function (data) { console.log("接受的消息",data) }); } } </script> <style scoped> </style>
VueEvent.js
/** * Vue实例 */ import Vue from 'vue'; var VueEvent = new Vue(); export default VueEvent;
附：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <child content="Lee"></child> <child content="Amy"></child> </div> <script> /*全局变量*/ Vue.prototype.mybus = new Vue(); Vue.component('child',{ props:{ content:String }, data:function(){ return{ selfContent:this.content } }, template:'<div @click="handleChildClick">{{selfContent}}</div>', methods:{ handleChildClick:function () { this.mybus.$emit('change',this.selfContent) } }, mounted:function () { var that = this; this.mybus.$on('change',function (msg) { that.selfContent = msg }) } }); vm = new Vue({ el: '#app', data: {}, methods:{ handleChild:function () { alert('child') } } }) </script> </body> </html>