父子组件之间的传值问题

1.父子之间传参

1.1.父传子:通过props进行传值

首先在父组件中:

父子组件之间的传值问题_第1张图片

然后再子组件中:

父子组件之间的传值问题_第2张图片

注意:圈起来的里面是关键,在父组件中的 ,然后在子组件中用props来接受父组件传过来的msg,最终直接渲染在html中。

2.2.子传父:通过emit进行传值

首先在子组件中:

父子组件之间的传值问题_第3张图片

然后再父组件中:

父子组件之间的传值问题_第4张图片

2.父子之间方法的调用

2.1.父调用子:通过$refs.[refName].函数()  调用

首先在子组件中定义好方法:

父子组件之间的传值问题_第5张图片

然后再父组件中:

父子组件之间的传值问题_第6张图片

注意:子组件定义好方法后,父组件通过$refs进行调用。

2.2.子调用父子:通过$parent.函数() 调用

首先在父组件中定义好函数:

父子组件之间的传值问题_第7张图片

然后在子组件中调用:

父子组件之间的传值问题_第8张图片

注意:父组件定义好方法后,子组件通过$parent进行调用

你可能感兴趣的:(vue,前端基础)