Vue父子组件通信

Vue开发，父子组件之间通信很常用，有传数据的，有调用方法的，有子组件操作父组件，也有父组件操作子组件，今天就简单说一下几个父子组件之间通信的方法。

父组件传递数据给子组件一般都是用props，

父组件：<spec :goods="goods"></spec>

子组件接收：props: ['goods'],跟data同级。

goods是子组件接收的键值，当你要传父组件data里面的数据的时候就需要bind，子组件接收的就是父组件data里面的goods数据，如果不需要可以直接

<spec goods="goods"></spec>这时候子组件接收的就是一个字符串goods。

父组件理论上改变子组件是通过改变传递数据，那么这时候就要使用v-if来控制显示隐藏，用v-if控制子组件会重新渲染，props数据也就会重新渲染。要是子组件直接是一直显示，我能想到的只能是调用子组件方法然后传参。

父组件调用子组件方法，要先给子组件加个ref属性，

<headCom ref="CartNum"></headCom>，然后父组件调用this.$refs.CartNum.getCartNum()

getCartNum()是子组件里面的方法。如果要改变子组件数据可以在getCartNum()方法里传递参数，子组件自己改变页面数据。

子组件获取了父组件传递过来的数据之后，是不能直接按照当前修改data里面的数据修改，防止父组件状态被改变了。如果子组件要改变传递过来的数据，可以在子组件这边再声明一个数据

代码语言：javascript复制

props: ['goods'],
data() {
    return {
      skus: this.goods,
}
},

这样子组件就可以随便修改数据，要是父子组件数据要同步，可以使用

this.$parent.specFlag = false; specFlag是父组件data里面的数据

还有一种方法就是调用父组件的方法，跟父组件改变子组件数据一样，通过方法。

<spec @refleshCartNum ="refleshCartNum"></spec>父组件引用子组件 this.$emit('refleshCartNum');子组件调用

@refleshCartNum也可以用:refleshCartNum，我们用@refleshCartNum是为了区分数据和方法，而且在子组件是不需要再props里面接收方法。

this.$emit('refleshCartNum');里面的'refleshCartNum'就是@refleshCartNum这个键值，跟数据传递一样。

然后="refleshCartNum"这里的refleshCartNum是父组件的方法，在子组件里面某个方法里触发this.

0 人点赞