Vue 组件通信

作者: 后除 | 来源:发表于2018-07-07 17:38 被阅读18次

    一、父组件向子组件通信(Prop)

    在子组件里面声明 props 可以接收父组件传过来的值实现父组件向子组件的单向通信。

    // 父组件
    <son title="后除"></title>
    
    // 子组件
    props: {
        titile: {
            type: String,
            required: true
        }
    }
    

    二、子组件向父组件通信

    1.子组件使用 $emit 触发事件,父组件用 v-on 监听并接收值。

    // 父组件
    <son @sonEvent="parentListen"></son>
    
    methods: {
        parentListen (msg) {
            console.log(msg)
        }
    }
    
    // 子组件
    this.$emit('sonEvent', 'I am Mazey!')
    

    2.自定义组件的 v-model。

    // 父组件
    <m-test
        v-model="parentMsg"></m-test>
        {{ parentMsg }}
        
    data: {
        parentMsg: 0
    }
    
    // 子组件
    <button @click="addsonMsg">addsonMsg</button>
    {{ sonMsg }}
    
    data () {
        return {
            sonMsg: 0
        }
    },
    model: {
        prop: 'sonMsg',
        event: 'sonEvent'
    },
    methods: {
        addsonMsg () {
            this.$emit('sonEvent', ++this.sonMsg)
        }
    }
    

    三、任意组件间通信

    注册一个空的 Vue 实例作为中转站,做事件的监听。

    // main.js
    data: {
        eventHub: new Vue()
    }
    
    // 组件A
    this.$root.eventHub.$emit('eventName', 'I am Mazey!')
    
    // 组件B
    this.$root.eventHub.$on('eventName', msg => {
        console.log(msg)
    })
    

    相关文章

      网友评论

        本文标题:Vue 组件通信

        本文链接:https://www.haomeiwen.com/subject/ykdguftx.html