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


相关推荐
运维阿江7 分钟前
【小白学HTML5】盒模型_第一讲
前端·html·html5
码界领航19 分钟前
【2025最新版】Chrome谷歌浏览器如何能恢复到之前的旧版本
前端·chrome
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS个人博客系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
乐多_L1 小时前
使用vue3框架vue-next-admin导出表格excel(带图片)
前端·javascript·vue.js
初尘屿风1 小时前
基于微信小程序的电影院订票选座系统的设计与实现,SSM+Vue+毕业论文+开题报告+任务书+指导搭建视频
vue.js·微信小程序·小程序
南望无一1 小时前
React Native 0.70.x如何从本地安卓源码(ReactAndroid)构建
前端·react native
Mike_188702783511 小时前
1688代采下单API接口使用指南:实现商品采集与自动化下单
前端·python·自动化
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS打卡健康评测系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
鲨鱼辣椒️面1 小时前
HTML视口动画
前端·html
一小路一1 小时前
Go Web 开发基础:从入门到实战
服务器·前端·后端·面试·golang