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