16 处理表单数据与父子组件之间的数据交换

目录

处理表单输入
    1，单行文本
    2，多行文本textarea
    3，复选框checkbox
    4，单选按钮radio
    5，select下拉选择框
    6，所有input类型
父子组件的表单数据交换
    1，使用sync
    2，使用v-model模式

<!-- 单行文本 -->
<input type="text" v-model.trim="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

<input v-bind:value="message" v-on:input="message=$event.target.value">

<p>{{ message1 }}</p>
<textarea @input="handleInput" v-model.lazy="message1" placeholder="add multiple lines"></textarea>

<!-- 复选框 -->
<p>
  <input @input="handleInput" type="checkbox" id="checkbox" v-model.number="checked" true-value="1" false-value="2" />
  <label for="checkbox">{{ checked }}</label>
</p>

<!-- 多个复选框 -->
<p>
  <input type="checkbox" id="checkbox1" v-model="checked2" value="value1" />
  <label for="checkbox1">value1</label>
  <input type="checkbox" id="checkbox2" v-model="checked2" value="value2" />
  <label for="checkbox2">value2</label>
  <input type="checkbox" id="checkbox3" v-model="checked2" value="value3" />
  <label for="checkbox3">value3</label>
  <br/>
  <span>Checked names: {{ checked2 }}</span>
</p>

<!-- 单选按钮 -->
<div>
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <input type="radio" id="three" value="Three" v-model="picked" />
  <label for="three">Three</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>

<!-- 选择框 -->
<div>
  <select v-model="selected">
    <option disabled value>请选择</option>
    <option :value="{ number: 1 }">1</option>
    <option :value="{ number: 2 }">2</option>
    <option :value="{ number: 3 }">3</option>
  </select>
  <span>Selected: {{ selected.number }}</span>
</div>

<!-- 多选选择框 -->
<div>
  <select multiple v-model="selected2">
    <option disabled value>请选择</option>
    <option :value="{ number: 1 }">1</option>
    <option :value="{ number: 2 }">2</option>
    <option :value="{ number: 3 }">3</option>
  </select>
  <span>Selected: {{ selected2 }}</span>
</div>

button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
colorNew	定义拾色器。
dateNew	定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
monthNew	定义 month 和 year 控件（不带时区）。
numberNew	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
rangeNew	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
searchNew	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
telNew	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew	定义用于输入时间的控件（不带时区）。
urlNew	定义用于输入 URL 的字段。
weekNew	定义 week 和 year 控件（不带时区）。

<template>
  <input name="xxxx" v-model="currentValue" @input="handleModelInput" />
</template>
<script>
export default {
  name: "ModelComponent2",
  props: {
    value: [String, Number, Date]
  },
  methods: {
    handleModelInput() {
      this.$emit("update:value", this.currentValue);
    }
  },
  watch: {
    // 属性是只读的
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  data: () => ({
    currentValue: ""
  })
};
</script>

<p>
<SyncComponent1 :value.sync="text1" ></SyncComponent1>
text1:{{text1}}
</p>

1，在子组件中当属性变化时，主动派发一个“update:xxx”事件，并附带xxx的值
2，在父组件中，使用:xxx.sync将数据双向绑定到一个data变量上

<template>
  <input name="xxxx" v-model="currentValue" @input="handleModelInput" />
</template>
<script>
export default {
  name: "SyncComponent2",
  props: {
    value: [String, Number]
  },
  methods: {
    handleModelInput() {
      this.$emit("input", this.currentValue);
    }
  },
  watch: {
    // 属性是只读的
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  data: () => ({
    currentValue: ""
  })
};
</script>

<p>
<SyncComponent2 v-model="text2" ></SyncComponent2>
text2:{{text2}}
</p>

<template>
  <input name="xxxx" v-model="currentValue" @input="handleModelInput" />
</template>
<script>
export default {
  name: "SyncComponent3",
  model: {
   prop: 'value',
   event: 'change'
  },
  props: {
    value: [String, Number]
  },
  methods: {
    handleModelInput() {
      // 与aync模式相比，发射的事件不同
      this.$emit("change", this.currentValue);
    }
  },
  watch: {
    // 属性是只读的
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  data: () => ({
    currentValue: ""
  })
};
</script>

<SyncComponent3 v-model="text3" ></SyncComponent3>
text3:{{text3}}
</p>