vue中关于$emit等的用法

最新推荐文章于 2024-02-22 10:48:08 发布

原创最新推荐文章于 2024-02-22 10:48:08 发布 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #$emit #vue中点击父组件触发子组件的事件 #vue中事件的传递

本文深入探讨了Vue.js中的三个核心概念：$ref用于组件内部元素的引用，$emit实现子组件向父组件的事件传递，以及$set确保数据变动时视图的实时更新。这些知识点对于理解和运用Vue.js进行高效开发至关重要。

1. $ref--------在vue中用来“定位标签

            <Form :label-width="100" ref="incidentalExFormData" :model="incidentalExFormData" inline>   </Form>
                  使用：this.$refs.incidentalExFormData

2. $emit--------在vue中用来：子组件可以使用 $emit 触发父组件的自定义事件。(就是说子组件将事件传递给父组件，让父组件去调用)

在这里插入图片描述
---------子组件的事件

<Button type="primary" @click="seachSubmit">查询</Button>
 seachSubmit: function() {
      this.pathList = "";
      if (this.formSeach.areaId != "" && this.formSeach.areaId != null) {
        this.pathList += "projectId=" + this.formSeach.areaId + "&";
      }
      }
      this.$emit("queryData", this.pathList);
      }

--------父组件

	<QueryMulti v-on:queryData="queryList" v-on:exportList="exportData"></QueryMulti>

3.$set()的正确使用方式-----用来给data对象新增属性，并触发视图更新（解决数据已跟新，但界面没有更新）

正确写法：this.$set(this.data,”key”,value’)

mounted () {
    this.$set(this.student,"age", 24)
}