vue之表单类组件封装与v-model简化代码

一.表单类组件 封装

父组件子传父
1.父传子:数据 应该是组件 props 传递 过来的，v-model 拆解 绑定数据
2.子传父:监听输入，子传父传值给父组件修改

父组件代码：

<template>
  <div>
    
    
    <BaseSelect :cityId="selectId" @changeId="selectId = $event">BaseSelect>
  div>
template>
<script>
import BaseSelect from "./components/BaseSelect.vue"
export default {
  name: 'VueApp',
  data() {
    return {
      selectId: '2',
    };
  },
  components: {
    BaseSelect
  }
};
script>
<style scoped>style>

子组件代码：

<template>
    <div>
        
        
        <select :value="cityId" @change="handleChange">
            <option value="1">北京option>
            <option value="2">上海option>
            <option value="3">广州option>
            <option value="4">深圳option>
        select>
    div>
template>
<script>
export default {
    name: 'VueBaseSelect',
    props: {
        cityId: String
    },
    methods: {
        handleChange(e) {
            // 子传父 用到this.$emit() 我们把对应的属性值当做参数传给父组件
            this.$emit("changeId", e.target.value)
        }
    }
};
script>
<style scoped>style>

二、父组件v-model 简化代码，实现 子组件和组件数据双向绑定

1.子组件中: props 通过 value 接收，事件触发 input
2.父组件中:v-model给组件直接绑数据

父组件代码：

<template>
  <div>
    
    <BaseSelect v-model="selectId">BaseSelect>
  div>
template>
<script>
import BaseSelect from "./components/BaseSelect.vue"
export default {
  name: 'VueApp',
  data() {
    return {
      selectId: '2',
    };
  },
  components: {
    BaseSelect
  }
};
script>
<style scoped>style>

子组件代码：

<template>
    <div>
        
        
        <select :value="value" @change="handleChange">
            <option value="1">北京option>
            <option value="2">上海option>
            <option value="3">广州option>
            <option value="4">深圳option>
        select>
    div>
template>
<script>
export default {
    name: 'VueBaseSelect',
    props: {
        // 我们直接使用value去接收父组件中的selectId
        value: String
    },
    methods: {
        handleChange(e) {
            // 子传父 用到this.$emit()
            this.$emit("input", e.target.value)
        }
    }
};
script>
<style scoped>style>

效果是一样的，不过代码量更加的少了

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！