zoukankan      html  css  js  c++  java
  • vue父子组件通信

    在开发中,往往一些数据需要从上层传递到下层:

    • 比如在一个页面中,我们从服务器请求到了很多的数据。
    • 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
    • 这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)

    如何进行父子组件间的通信呢?Vue官方提到

    • 通过props向子组件传递数据
    • 通过事件向父组件发送消息

    在组件中,使用选项props来声明需要从父级接收到的数据。

    props的值有两种方式:

    • 方式一:字符串数组,数组中的字符串就是传递时的名称。
    • 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。

    子组件通过使用自定义事件来完成向父组件传递数据。

    自定义事件的流程:

    • 在子组件中,通过$emit('事件名称','传递的参数')来触发事件。
    • 在父组件中,通过v-on来监听子组件事件。

    父子组件的访问方式

    有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。

    • 父组件访问子组件:使用$children或$refs
    • 子组件访问父组件:使用$parent

    $children

    this.$children是一个数组类型,它包含所有子组件对象。

    $children的缺陷

    • 通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。
    • 但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
    • 有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用$refs

    $refs

    • $refs和ref指令通常是一起使用的。
    • 首先,我们通过ref给某一个子组件绑定一个特定的ID。
    • 其次,通过this.$refs.ID就可以访问到该组件了。
  • 相关阅读:
    c++11——列表初始化
    flask学习(十二):for循环遍历
    flask学习(十一):if判断语句
    flask学习(十):模板中访问模型和字典的属性
    flask学习(九):模板渲染和参数传递
    flask学习(八):页面跳转和重定向
    flask学习(七):URL反转
    flask学习(六):URL传参
    flask学习(五):使用配置文件
    flask学习(四):debug模式
  • 原文地址:https://www.cnblogs.com/move-up/p/12855435.html
Copyright © 2011-2022 走看看