『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』 专栏,持续更新中
『未完待续』


相关推荐
Y42581 天前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge1 天前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
速易达网络1 天前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou1 天前
js前端this指向规则
开发语言·前端·javascript
lichong9511 天前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer1 天前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong9511 天前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马1 天前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱1 天前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌1 天前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序