vue父子组件通信实现笔记

父组件向子组件传递内容

父组件发送:

模板正常绑定方式传值即可

<yixzm :flag="dream"></yixzm>

子组件接收:

props接收后可直接使用,参考watch函数,method内使用同样是 this.flag

props: {
    flag: String
},
watch: {
    flag() {
        console.log(this.flag)
    }
},

子组件向父组件传递内容

子组件发送:

this.$emit('rander', true)

父组件接收:

<yixzm v-if="flagRander" @rander="rander"></yixzm>
rander() {
    this.flagRander = false
    this.$nextTick(function () {
        this.flagRander = true
    })
},

子组件中的true在本例中无用,如需使用,写法如下:

rander(data) {
    ...
}

官网对应文档章节

Prop

[Prop 验证]https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81

emit

[vm.$emit]https://cn.vuejs.org/v2/api/#vm-emit

watch

[watch]https://cn.vuejs.org/v2/api/#watch

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!