包含表单域标签的组件应用v-model

组件应用v-model

v-model指令的使用：

1. 表单域标签中可以使用
2. 在普通的组件中也可以使用(该组件确定要包含表单域标签)

组件上使用v-model官网详情

1. 在普通表单域标签中使用v-model

v-model实现的简易原理

v-model就是 value属性 和 oninput事件的结合，
oninput事件：输入框有输入动作就触发，
通过value和oninput事件，使得输入框也有双向绑定效果。

<template>
    <div>
      <p>{{city}}</p>
      <div>v-model实现双向绑定效果:<input type="text" v-model="city"/></div>
      <p>value/oninput事件结合实现双向绑定效果：
        <input type="text" :value="city" @input="city=$event.target.value"></p>
      	<input type="text" :value="city" @input="(data)=>{city=data}"></p>
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      city: '北京'
    }
  }
}
</script>

2. 组件标签应用v-model

• 父组件标签应用v-model，本质就是value属性 和 @input事件的结合。
• 子组件通过props接收value值，应用value，就是在使用父组件v-model的成员。
• 子组件表单域的数据发生变化，如果这个数据还要传给父组件的v-model，那么就设置 @input="$emit('input',\$event.target.value)"

父组件：

<!-- App.vue  充当父组件-->
<template>
    <div>
      <p>父组件的city：{{city}}</p>
      <!-- 应用输入框子组件 -->
      <com-input v-model="city"></com-input>
      <!--
        v-model就是value属性 和 oninput事件的结合
        :value="city" 就是父组件给子组件传递的数据(属性值传值)
        @input事件：可以对本身的value属性做修改(city)
        @input事件两种设置方式：
        1. 简单语句
        2. 箭头函数，好处是可以接收其他应用传递的数据
      -->
      <!-- <com-input :value="city" @input="(data)=>{city=data}"></com-input> -->
      <!-- <com-input :value="city" @input="city=$event.target.value"></com-input> -->
    </div>
</template>

<script>
// 对ComInput做 导入、注册、使用
// 给子组件配置v-model
import ComInput from './components/ComInput.vue'
export default {
  name: 'App',
  components: {
    ComInput
  },
  data () {
    return {
      city: 'tom'
    }
  },
}
</script>

子组件：

<!-- 创建一个输入框的业务组件(子组件) -->
<template>
    <div>
      <!-- 如下输入框value发生变化，父组件v-model要感知到
        @input事件：可以感知输入框内容发生变化
        $event:在Vue中固定，代表事件对象
        $event.target:操作目标的dom对象，就是input框对象
        $event.target.value:代表当前输入框已经输入好的信息，就是value属性的内容
        对当前组件的oninput事件做调用
      -->
      用户名：<input
                type="text"
                :value="value"
                @input="$emit('input',$event.target.value)">
    </div>
</template>

<script>
// 对父组件设置的v-model的数据信息做接收使用
export default {
  name: 'com-input',
  // 接收父组件传递过来的信息props
  props: ['value']
}
</script>