前端框架:Vue父子组件之间的访问

有时候我们需要父组件访问子组件,子组件访问父组件,或者自组件访问根组件。

针对这几种情况,Vue.js都提供了响应的API:

● 父组件访问子组件:使用$children或$refs</br>
● 子组件访问父组件:使用$parent</br>
● 子组件访问根组件:使用$root</br>

$children示例

下面这段代码定义了3个组件:父组件parent-component,两个子组件child-component1和child-component2。</br>

在父组件中,通过this.$children可以访问子组件</br>

this.$children是一个数组,它包含所有子组件的实例</br>

1.png
2.png
3.png

result.gif



$refs示例

组件个数较多时,我们难以记住各个组件的顺序和位置,通过序号访问子组件不是很方便。

在子组件上使用v-ref指令,可以给子组件指定一个索引ID:

ref.png

在父组件中,则通过$refs.索引ID访问子组件的实例:

this.$refs.png



$parent示例

下面这段代码定义了两个组件:child-component和它的父组件parent-component。

在子组件中,通过this.$parent可以访问到父组件的实例。

$parent.png
this.$parent.png
result.png

注意:尽管可以访问父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用props传递参数。

另外,在子组件中修改父组件的状态是非常糟糕的做法,因为:

  1. 这让父组件与子组件紧密地耦合;
  2. 只看父组件,很难理解父组件的状态。因为他可能被任意子组件修改!理想状况下,只有组件自己能修改它的状态。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容