当前位置：首页 > article >正文

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

article 2024/11/15 4:09:25

功能介绍

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

示例

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

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

SearchComponent.vue

<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

<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

<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>