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


相关推荐
qq_3643717230 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森1 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象5 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森6 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
天天进步20159 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket