• 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就可以访问到该组件了。
  • 相关阅读:
    字符串前面加@
    SQL字段类型bit 查询时注意
    SELECT IDENT_CURRENT(tableName)和自增长列的纠结
    解析xml文件 selectSingleNode取不到节点
    【.NET】.NET MVC4 微信扫一扫功能实现附全部代码
    未定义对象
    C# Web开发中弹出对话框的函数[转载]
    json序列化和反序列化
    jq的$.each()方法
    学习URLRewriter.dll的使用
  • 原文地址:https://www.cnblogs.com/move-up/p/12855435.html
Copyright © 2020-2023  润新知