vue 组件及组件传值

总结

• 创建一个组件

    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: {
        }
    })