大家好，欢迎来到IT知识分享网。
本文转自:https://blog.csdn.net/_/article/details/
方法一 props传参
父组件
<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", components:{ Son }, data(){ return{ arr:[1,2,3] } }, methods:{ hello(){ console.log("hello world!") } }, } </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','我是子组件传递的消息！'); } } } </script> 方法四 消息发布与订阅
安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
父组件
<template> <div class="wrap"> <div>我是组件A</div> <button @click="sendMsg">发送</button> </div> </template> <script> import pubsub from 'pubsub-js' export default { name: "A", methods:{ sendMsg(){ pubsub.publishSync("sendMsg","这是A组件发布的消息！"); } } } </script> 子组件
<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> 方法五 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> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/109623.html
