怎么在Vue中对input组件进行封装
怎么在Vue中对input组件进行封装?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
代码如下
子组件的模板设置
<template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span> <input type="text" ref="input" :value="value" @input="$emit('input', $event.target.value)" > </div> </template> <script> export default { name: 'inputlsit', props: ['text', 'value'], } </script>
父组件模板
<template> <div class="completion-input-box"> <FromList :text="'创业项目名称'" v-model="projectN"></FromList> <FromList :text="'所属公司名称'" v-model="companyN"></FromList> <FromList :text="'所属投资机构名称'" v-model="mechanismN"></FromList> </div> </template> <script> import FromList from './FromList.vue' export default { name: 'search', data() { return { projectN: '', // 创业项目名称 companyN: '', // 所属公司名称 mechanismN: '' // 所属机构名称 } }, components: { FromList } } </script>
看完上述内容,你们掌握怎么在Vue中对input组件进行封装的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!