表单类组件封装&v-model简化代码

原创已于 2023-10-12 17:05:31 修改 · 630 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-10-12 16:48:41 首次发布

web_html 专栏收录该内容

86 篇文章

订阅专栏

博客围绕Vue表单类组件封装及使用v-model简化代码展开。介绍了创建工程的步骤，包括在指定路径通过命令行操作创建Vue项目，如使用vue create创建项目、cd进入项目目录、npm run serve启动服务等，还提及了App.vue和BaseSelect.vue文件。

表单类组件封装&v-model简化代码
在这里插入图片描述
创建工程：
H:\java_work\java_springboot\vue_study

ctrl按住不放右键悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day04\准备代码\11-封装表单类组件

vue --version

vue create v-fengzhuang-demo
cd v-fengzhuang-demo
npm run serve

App.vue

<template class="app">
  <BaseSelect :cityId="selectId" @changeId="selectId = $event"> </BaseSelect>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue";

export default {
  data() {
    return {
      selectId: "103",
    };
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
</style>

components\BaseSelect.vue

<template>
  <div>
    <select :value="cityId" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
      <option value="105">广州</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    cityId: String,
  },
  methods: {
    handleChange(e) {
      // console.log(e.target.value);
      this.$emit("changeId", e.target.value);
    },
  },
};
</script>

<style>
</style>

在这里插入图片描述

App.vue

<template class="app">
  <!-- <BaseSelect :value="selectId" @input="selectId = $event"> </BaseSelect> -->
  <div>
    <BaseSelect v-model="selectId"></BaseSelect>
    <BaseSelect :value="selectId" @input="selectId = $event"> </BaseSelect>
  </div>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue";

export default {
  data() {
    return {
      selectId: "103",
    };
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
</style>

components\BaseSelect.vue

<template>
  <div>
    <select :value="value" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
      <option value="105">广州</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  methods: {
    handleChange(e) {
      // console.log(e.target.value);
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style>
</style>