『VUE』25. 组件事件与v-model(详细图文注释)

目录


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

功能介绍

预期拿到一个输入搜索框,用户在搜索框中输入数据后实时把数据发送给父组件使用.


示例

主要是对前面的v-model和watch的结合使用,实现获取更新的子组件的数据并发送给父组件

最终效果是每一次搜索框输入数据都会传递数据,类似百度搜索每次你输入都会更新推荐搜索的内容.

SearchComponent.vue

html 复制代码
<template>
  <h3>SearchComponent</h3>
  搜索:<input type="text" v-model="message" />
</template>

<script>
export default {
  emits: ["SearchEvent"],
  data() {
    return {
      message: "",
    };
  },
  methods: {
    clickEventHandle() {},
  },
  watch: {
    message(NewData, OldData) {
      this.$emit("SearchEvent", NewData);
    },
  },
};
</script>

Main.vue

html 复制代码
<template>
  <h3>Main</h3>
  <div>得到的子组件搜索内容:{{ message }}</div>
  <br />
  <h3>----------------------</h3>
  <SearchComponent @SearchEvent="GetSearch" />
</template>

<script>
import SearchComponent from "./SearchComponent.vue";

export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    SearchComponent,
  },
  methods: {
    // 前面 this.$emit("someEvent", "需要传递给父组件的数据");
    // data就是"需要传递给父组件的数据"
    GetSearch(data) {
      console.log("准备接收其他组件数据");
      this.message = data;
      console.log("搜索内容为:", this.message);
    },
  },
};
</script>

App.vue

html 复制代码
<template>
  <!-- <GlobalHeader />
  <Main />
  <Aside /> -->
  <!-- <Parent /> -->
  <!-- <ComponentEvent /> -->
  <Main />
</template>

<script>
// import Header from "./page/Header.vue";
// import Main from "./page/Main.vue";
// import Aside from "./page/Aside.vue";
// import Child from "./components/Child.vue";
// import Parent from "./components/Parent.vue";
// import ComponentEvent from "./components/ComponentEvent.vue";
// import ComponentEventSon from "./components/ComponentEventSon.vue";
import Main from "./components/Main.vue";

export default {
  components: {
    // Header,
    // Main,
    // Aside,
    // Child,
    // Parent,
    // ComponentEvent,
    // ComponentEventSon,
    Main,
  },
};
</script>

<style scoped></style>

总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


相关推荐
晓131313 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor20 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军21 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺22 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1123 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡24 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu26 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂27 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军28 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038128 分钟前
拓展运算符和剩余参数
前端