父组件
<template> <div class="wrap"> <div>我是Father组件</div> <Son str="我是字符串" :num=5 :obj="{cont:'我是一个对象'}" :func="()=>{this.hello()}" :arr="arr"></Son> </div></template><script> import Son from './Son' export default { name: "Father", data(){ return{ arr:[1,2,3] } }, methods:{ hello(){ console.log("hello world!") } }, components:{ Son } }</script>子组件
<template> <div>我是Son组件</div></template><script> export default { name: "Son", props:{//props列表 arr:Array,//定义参数类型 num:Number, str:String, str2:{ type:String, default:"我是默认字符串"//定义参数默认值 }, func:{ type:Function, required:false//定义参数是否必须值 }, obj:{ type: Object, required:false } }, created() { console.log(this.str);//我是字符串 console.log(this.str2);//我是默认字符串 console.log(this.num);//5 console.log(this.func);//hello(){console.log("hello world!");} console.log(this.arr);//[1,2,3] console.log(this.obj);//{cont:'我是一个对象'} this.func();//hello world! } }</script> 方法二 事件传递父组件
<template> <div class="wrap"> <div>我是Father组件</div> <Son @func="speak" ></Son> </div></template><script> import Son from './Son' export default { name: "Father", methods:{ speak(msg){ console.log(msg);//我是子组件发送的消息！ } }, components:{ Son } }</script>子组件
<template> <div> <div>我是Son组件</div> </div></template><script> export default { name: "Son", mounted() { this.$emit('func',"我是子组件发送的消息！"); } }</script> 方法三 事件监听父组件
<template> <div class="wrap"> <div>我是Father组件</div> <Son ref="son"></Son> </div></template><script> import Son from './Son' export default { name: "Father", mounted(){ this.$refs['son'].$on('func',(msg)=>{ console.log(msg); }) }, components:{ Son } }</script>子组件
<template> <div> <div>我是Son组件</div> <button @click="$emit('func','我是子组件传递的消息1！')">Send1</button> <button @click="sendMsg">Send2</button> </div></template><script> export default { name: "Son", methods:{ sendMsg(){ this.$emit('func','我是子组件传递的消息2！'); } } }</script> 方法四 消息发布与订阅安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
组件A
组件B
<template> <div> <div>我是组件B</div> </div></template><script> import pubsub from 'pubsub-js' export default { name: "B", mounted(){ pubsub.subscribe("sendMsg",(e,msg)=>{ console.log(e,msg);//sendMsg 这是A组件发布的消息！ }) }, }</script> publishSync同步发送消息publish
同步发送消息subscribe
订阅消息unsubscribe
卸载特定订阅clearAllSubscriptions
清除所有订阅 方法五 EventBus传参
1.在main.js种挂载全局EventBus
Vue.prototype.$EventBus = new Vue()2.A组件
<template> <div class="wrap"> <div>我是组件A</div> <button @click="sendMsg">发送</button> </div></template><script> export default { name: "A", methods:{ sendMsg(){ this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！") } } }</script>3.B组件
<template> <div> <div>我是组件B</div> </div></template><script> export default { name: "B", mounted(){ this.$EventBus.$on('sendMsg',(msg)=>{ console.log(msg);//这是组件A发送的消息！ }) }, }</script>通过挂载全局Vue对象传递参数。