vue组件传值的五种方式

标签：插件   订阅   number   publish   def   div   vue   syn   rop   

方法一 props传参
父组件

1. <template>
2.     <div class="wrap">
3.         <div>我是Father组件</div>
4.         <Son
5.           str="我是字符串"
6.           :num=5
7.           :obj="{cont:‘我是一个对象‘}"
8.           :func="()=>{this.hello()}"
9.           :arr="arr"></Son>
10.     </div>
11. </template>
12. <script>
13.     import Son from ‘./Son‘
14.     export default {
15.         name: "Father",
16.         data(){
17.             return{
18.                 arr:[1,2,3]
19.             }
20.         },
21.         methods:{
22.             hello(){
23.                 console.log("hello world!")
24.             }
25.         },
26.         components:{  Son  }
27.     }
28. </script>

子组件

1. <template>
2.     <div>我是Son组件</div>
3. </template>
4. <script>
5.     export default {
6.         name: "Son",
7.         props:{//props列表
8.             arr:Array,//定义参数类型
9.             num:Number,
10.             str:String,
11.             str2:{
12.                 type:String,
13.                 default:"我是默认字符串"//定义参数默认值
14.             },
15.             func:{
16.                 type:Function,
17.                 required:false//定义参数是否必须值
18.             },
19.             obj:{
20.                 type: Object,
21.                 required:false
22.             }
23.         },
24.         created() {
25.             console.log(this.str);//我是字符串
26.             console.log(this.str2);//我是默认字符串
27.             console.log(this.num);//5
28.             console.log(this.func);//hello(){console.log("hello world!");}
29.             console.log(this.arr);//[1,2,3]
30.             console.log(this.obj);//{cont:‘我是一个对象‘}
31.             this.func();//hello world!
32.         }
33.     }
34. </script>

方法二 事件传递
父组件

1. <template>
2.     <div class="wrap">
3.         <div>我是Father组件</div>
4.         <Son @func="speak" ></Son>
5.     </div>
6. </template>

8. <script>
9.     import Son from ‘./Son‘
10.     export default {
11.         name: "Father",
12.         methods:{
13.            speak(msg){
14.                console.log(msg);//我是子组件发送的消息！
15.            }
16.         },
17.         components:{
18.             Son
19.         }
20.     }
21. </script>

子组件

1. <template>
2.     <div>
3.         <div>我是Son组件</div>
4.     </div>
5. </template>

7. <script>
8.     export default {
9.         name: "Son",
10.         mounted() {
11.             this.$emit(‘func‘,"我是子组件发送的消息！");
12.         }
13.     }
14. </script>

方法三 事件监听
父组件

1. <template>
2.     <div class="wrap">
3.         <div>我是Father组件</div>
4.         <Son ref="son"></Son>
5.     </div>
6. </template>
7. <script>
8.     import Son from ‘./Son‘
9.     export default {
10.         name: "Father",
11.         mounted(){
12.             this.$refs[‘son‘].$on(‘func‘,(msg)=>{
13.                 console.log(msg);
14.             })
15.         },
16.         components:{
17.             Son
18.         }
19.     }
20. </script>

子组件

1. <template>
2.     <div>
3.         <div>我是Son组件</div>
4.         <button @click="$emit(‘func‘,‘我是子组件传递的消息1！‘)">Send1</button>
5.         <button @click="sendMsg">Send2</button>
6.     </div>
7. </template>

9. <script>
10.     export default {
11.         name: "Son",
12.         methods:{
13.             sendMsg(){
14.                 this.$emit(‘func‘,‘我是子组件传递的消息2！‘);
15.             }
16.         }
17.     }
18. </script>

方法四 消息发布与订阅
安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
组件A

1. <template>
2.     <div class="wrap">
3.         <div>我是组件A</div>
4.         <button @click="sendMsg">发送</button>
5.     </div>
6. </template>

8. <script>
9.     import  pubsub from ‘pubsub-js‘
10.     export default {
11.         name: "A",
12.         methods:{
13.             sendMsg(){
14.                 pubsub.publishSync("sendMsg","这是A组件发布的消息！");
15.             }
16.         }
17.     }
18. </script>

组件B

1. <template>
2.     <div>
3.         <div>我是组件B</div>
4.     </div>
5. </template>

7. <script>
8.     import pubsub from ‘pubsub-js‘
9.     export default {
10.         name: "B",
11.         mounted(){
12.             pubsub.subscribe("sendMsg",(e,msg)=>{
13.                 console.log(e,msg);//sendMsg 这是A组件发布的消息！
14.             })
15.         },
16.     }
17. </script>

• publishSync
  同步发送消息
• publish
  同步发送消息
• subscribe
  订阅消息
• unsubscribe
  卸载特定订阅
• clearAllSubscriptions
  清除所有订阅

方法五 EventBus传参
1.在main.js种挂载全局EventBus

1. Vue.prototype.$EventBus = new Vue()

2.A组件

1. <template>
2.     <div class="wrap">
3.         <div>我是组件A</div>
4.         <button @click="sendMsg">发送</button>
5.     </div>
6. </template>

8. <script>
9.     export default {
10.         name: "A",
11.         methods:{
12.             sendMsg(){
13.                this.$EventBus.$emit(‘sendMsg‘,"这是组件A发送的消息！")
14.             }
15.         }
16.     }
17. </script>

3.B组件

1. <template>
2.     <div>
3.         <div>我是组件B</div>
4.     </div>
5. </template>

7. <script>
8.     export default {
9.         name: "B",
10.         mounted(){
11.             this.$EventBus.$on(‘sendMsg‘,(msg)=>{
12.                 console.log(msg);//这是组件A发送的消息！
13.             })
14.         },
15.     }
16. </script>

通过挂载全局Vue对象传递参数。

vue组件传值的五种方式

标签：插件   订阅   number   publish   def   div   vue   syn   rop   

原文地址：https://www.cnblogs.com/baiyang128/p/14341843.html