vue封装组件_Vue中input组件的封装以及v-model的深层解析

vue如何在自定义组件中使用v-model和input框

如图，使用封装好的组件，给子组件input框一个初始值，父组件修改并点击提交

首先使用父子组件通信传值实现功能

父组件引入并定义子组件，给子组件传

1、父组件引入并定义子组件，给子组件传初始值，子组件用props接收初始值、子组件接收到的初始值绑定到input框

父组件

<template>
  <div class="main">
    <!-- 1121 -->
    <childVue :parentData="num"></childVue>
    <button @click="subbmit">提交</button>
  </div>
</template>

<script>
import childVue from './1'
export default {
  name: 'HelloWorld',
  components: {
    childVue
  },
  data() {
    return {
      num: 'admin'
    }
  },
  methods: {
    subbmit() {
      console.log(this.num) // 要提交的值
    }
  }
}
</script>

子组件

<template>
  <div>
    账号
    <input :value="parentData" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: ['parentData'],
}

</script>

2、监听子组件input框输入事件，并传给父组件，父组件监听

子组件完整代码

<template>
  <div>
    账号
    <input :value="parentData"
    @input="$emit('changeValue', $event.target.value)" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: ['parentData'],
}

父组件完整代码

<template>
  <div class="main">
    <!-- 1121 -->
    <childVue :parentData="num" @changeValue="inputChange"></childVue>
    <button @click="subbmit">提交</button>
  </div>
</template>

<script>
import childVue from './1'
export default {
  name: 'HelloWorld',
  components: {
    childVue
  },
  data() {
    return {
      num: 'admin'
    }
  },
  methods: {
    inputChange(value){  // value是子组件传过来的值
      this.num = value
    },
    subbmit() {
      console.log(this.num) // 要提交的值
    }
  }
}

改用v-model实现

1、父组件引入并定义子组件，给子组件传初始值，子组件用props接收初始值、子组件接收到的初始值绑定到input框

父组件

<template>
  <div class="main">
    <!-- 1121 -->
    <childVue :parentData="num"></childVue>
    <button @click="subbmit">提交</button>
  </div>
</template>

<script>
import childVue from './1'
export default {
  name: 'HelloWorld',
  components: {
    childVue
  },
  data() {
    return {
      num: 'admin'
    }
  },
  methods: {
    subbmit() {
      console.log(this.num) // 要提交的值
    }
  }
}
</script>

子组件

<template>
  <div>
    账号
    <input :value="parentData" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: ['parentData'],
}

</script>

2、监听子组件input框输入事件，并传给父组件，父组件监听

子组件完整代码

<template>
  <div>
    账号
    <input :value="parentData"
    @input="$emit('input', $event.target.value)" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: ['parentData'],
}

</script>

父组件完整代码

<template>
  <div class="main">
    <!-- 1121 -->
    <childVue :parentData="num" v-model="num"></childVue>
    <button @click="subbmit">提交</button>
  </div>
</template>

<script>
import childVue from './1'
export default {
  name: 'HelloWorld',
  components: {
    childVue
  },
  data() {
    return {
      num: 'admin'
    }
  },
  methods: {
    subbmit() {
      console.log(this.num) // 要提交的值
    }
  }
}
</script>

.sync修饰组件实现

<childVue :parentData.sync="num"></childVue>
//等同于
<childVue :parentData="num" @update:parentData ="val => num = val"></childVue>

在子组件更新num的时候，父组件的num跟着更新
所以
父组件<childVue :parentData.sync="num"></childVue>
子组件调用this.$emit('update:parentData', newValue)就完成了更新

子组件完整代码

<template>
  <div>
    账号
    <input :value="parentData"
    @input="$emit('update:parentData',$event.target.value)" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: ['parentData'],
}
</script>

父组件完整代码

<template>
  <div class="main">
    <!-- 1121 -->
    <childVue :parentData.sync="num"></childVue>
    <button @click="subbmit">提交</button>
  </div>
</template>

<script>
import childVue from './1'
export default {
  name: 'HelloWorld',
  components: {
    childVue
  },
  data() {
    return {
      num: 'admin'
    }
  },
  methods: {
    subbmit() {
      console.log(this.num) // 要提交的值
    }
  }
}
</script>

---

v-model的本质

从最初学习Vue就知道v-model可以实现双数据绑定，根据官方文档介绍，v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input事件监听。

所以父组件使用v-model可以监听到子组件$emit('input' , value)事件，因此我们可以很明显的意识到，组件使用v-model本质上还是一个子父组件通信的语法糖。