Vue组件传参的五种方式

方法一 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",

        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

<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>

组件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对象传递参数。