vue組件傳值的五種方式


方法一 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對象傳遞參數。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM