vue组件及组件传值

本是古典何须时尚 2023-02-22 13:56 114阅读 0赞

## 总结 ##

*  创建一个组件

Vue.component('组件的标签'，{ 
            template: '模板内容'
        })
        // 例如 定义一个子组件
        Vue.component('child'，{ 
            template: '<div></div>'
        })
        // 定义一个父组件 将子组件在父组件中使用
        Vue.component('parent'，{ 
            template: `<div> <child></child> </div>`
        })
    
        
         
          组件传值
          父子组件传值
              // 例如 定义一个子组件
        Vue.component('child'，{ 
            // 在子组件中通过props接收父组件中的自定义属性
            props: ['child_id'],
            template: '<div>{ {child_id}}</div>'
        })
        // 定义一个父组件 将子组件在父组件中使用
        Vue.component('parent'，{ 
            // 在父组件中通过自定义属性 绑定变量 可以将变量的值传递给子组件
            template: `<div> <child :child_id="id"></child> </div>`,
            data() { 
                return { 
                    id: '123'
                }
            }
        })
    
          
            
             子组件向父组件传值
             例如将子组件中的id传递给父组件
            
         // 例如 定义一个子组件
        Vue.component('child'，{ 
            template: '<div @click="fun">{ {child_id}}</div>',
            data() { 
                return { 
                    id: '123'
                }
            },
            methods: { 
                fun() { 
                    // this.$emit 是一个事件映射 可以看做自定义了一个事件 他的第一个参数是自定义的事件名称
                    // 第二个参数是要传递的变量
                    this.$emit('eve', this.id)
                }
            }
        })
        // 定义一个父组件 将子组件在父组件中使用
        Vue.component('parent'，{ 
            // 在父组件的子组件标签中绑定自定义事件 （这个事件名称要入this.$emit定义的事件名称保持一致）
            template: `<div> <child @eve="getId"></child> </div>`,
            data() { 
                return { 
                }
            },
            methods: { 
                getId(id) { 
                    // 在该函数中就可以接受到子组件传递过来的变量了 默认参数就是传递的变量
                    console.log(id)
                }
            }
        })
    
           
             
              非父子组件传值
              例如 将组件一中的id传递给组件二
             
         var bus = new Vue() //定义一个bus总线
        // Vue.prototype.$bus = bus //将bus挂载在自己的vue项目的实例化对象中
        var app = new Vue({ 
            el: '#app',
            data: { 
                bus
            }
        })
        Vue.component('child-one'，{ 
            template: '<div @click="fun">{ {child_id}}</div>',
            data() { 
                return { 
                    id: '123'
                }
            },
            methods: { 
                fun() { 
                    // 如果采用bus挂载在原型上的写法
                    // this.$bus.$emit('eve', this.id)
                    // 如果采用将bus放入根组件的data中
                    this.$root.$bus.$emit('eve', this.id)
                }
            }
        })
        Vue.component('child-two'，{ 
            template: `<div> <child></child> </div>`,
            data() { 
                return { 
                }
            },
            created() { 
                // 如果采用bus挂载在原型上的写法
                // this.$bus.$on('eve', function(data){ 
                // console.log(data)
                // })
                // 如果采用将bus放入根组件的data中
                this.$root.$bus.$on('eve', function(data) { 
                    console.log(data)
                })
            },
            methods: { 
            }
        })