vue组件传值

首先要先弄清楚组件之间的关系

            组件关系只有两种：父子，非父子

组件传值：因为每一个组件的data都是独立的 互相之间不能通讯

            一、父组件向子组件传值

                1 在子组件中写上props 在props中自定义名字

                        props: ['自定义名字']

                2 在父组件中找到子组件标签 然后在子组件标签上 使用v-bind:自定义名字="父组件要发送的数据"

                        <子组件标签 :自定义名字="要发送的数据"></子组件标签>

                3 在子组件中将自定义名字当做data使用

                        <元素标签>{{自定义名字}}</元素标签>

            二、子组件向父组件传值

                1 在子组件中 绑定自定义事件 使用this.$emit()发送数据

                    template: `

                        <button @click="自定义事件"></buttton>

                    `

                    methods: {

                        自定义事件() {

                            this.$emit("自定义事件名1",要发送的数据)

                        }

                    }

                    2 在父组件中 找到子组件标签 在子组件标签上 使用v-on:自定义事件名1="新的方法名"

                            <子组件标签 v-on:自定义事件名1="新的方法名"></子组件标签>

                    3 在父组件的methods里边 编写新的方法

                    methods: {

                        新的方法名(data) {

                            //data就是子组件传递过来数据

                        }

                    }

            三、非父子组件传值需要使用

                    $emit

                        发送数据

                    $on

                        监听数据

            步骤：

                1 创建公共实例化对象

                const bus=new Vue()

                2 在需要发送数据的组件中 使用bus.$emit("自定义名字",要传递数据)

                methods: {

                    方法名() {

                        bus.$emit("自定义名字",要传递数据)

                    }

                }

                3 在需要接受数据的组件的生命周期created中 使用bus.$on监听数据

                created() {

                    bus.$on("自定义名字",data=> {

                        // data就是传递过来的数据

                    })

                }