vue 表单封装的示例

最新推荐文章于 2024-09-30 14:28:41 发布

虾米大王

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量35

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/modern358/article/details/132079204

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

本文介绍了在Vue项目中如何通过简化`v-model`属性实现父组件与子组件之间的数据交互，展示了从`@changeId`到`v-model`的迁移过程。

摘要由CSDN通过智能技术生成

新建vue项目

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <div class="parent">
      <p>{{ selectId }}</p>
      <!--   @changeId="selectId = $event"   -->
      <base-select :cityId = "selectId" @changeId="handleChange" ></base-select>
    </div>
  </div>
</template>

<script>
import BaseSelect from "@/components/BaseSelect";

export default {
  name: 'App',
  data(){
    return {
      selectId: '102'
    }
  },
  components:{
    BaseSelect
  },
  methods:{
    handleChange(value){
      this.selectId = value;
    }
  }

}
</script>

<style>

</style>

BaseSelect.vue

<template>
    <div>
        <label for="select1">城市</label>
        <select id="select1" :value="cityId" @change="handleChange">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">武汉</option>
            <option value="104">广州</option>
            <option value="105">哈尔滨</option>
            <option value="106">漠河</option>
        </select>
    </div>
</template>

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

<style scoped>

</style>

这个可以有一种简化写法

app.vue

<template>
  <div id="app">
    <div class="parent">
      <p>{{ selectId }}</p>
      <!--   @changeId="selectId = $event"   -->
      <base-select v-model="selectId"></base-select>
    </div>
  </div>
</template>

<script>
import BaseSelect from "@/components/BaseSelect";

export default {
  name: 'App',
  data(){
    return {
      selectId: '102'
    }
  },
  components:{
    BaseSelect
  },
  methods:{
    handleChange(value){
      this.selectId = value;
    }
  }

}
</script>

<style>

</style>

BaseSelect.vue

<template>
    <div>
        <label for="select1">城市</label>
        <select id="select1" :value="value" @change="handleChange">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">武汉</option>
            <option value="104">广州</option>
            <option value="105">哈尔滨</option>
            <option value="106">漠河</option>
        </select>
    </div>
</template>

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

<style scoped>

</style>