This article mainly introduces relevant information about the detailed examples of encapsulating input components in Vue. I hope this article can help everyone. Friends in need can refer to it. I hope it can help everyone.
Encapsulating the input component in Vue
I've been a little busy lately. I haven't updated it for a long time. Sorry. Today we are going to post a simple template on how to customize the encapsulation of the input component. Code friends can add the required parameters to their actual projects
UI diagram in my project It’s like this
The code is as follows
Template settings for sub-components
<template> <p class="completion-input-box"> <span class="input-box-name">{{text}}</span> <input type="text" ref="input" :value="value" @input="$emit('input', $event.target.value)" > </p> </template> <script> export default { name: 'inputlsit', props: ['text', 'value'], } </script>
Parent component template
<template> <p class="completion-input-box"> <FromList :text="'创业项目名称'" v-model="projectN"></FromList> <FromList :text="'所属公司名称'" v-model="companyN"></FromList> <FromList :text="'所属投资机构名称'" v-model="mechanismN"></FromList> </p> </template> <script> import FromList from './FromList.vue' export default { name: 'search', data() { return { projectN: '', // 创业项目名称 companyN: '', // 所属公司名称 mechanismN: '' // 所属机构名称 } }, components: { FromList } } </script>
Related recommendations:
Detailed introduction to the TextInput component
MaterialDesign--input component of WeChat applet
Detailed example of using vue to encapsulate the plug-in and publish it to npm
The above is the detailed content of Tutorial on how to encapsulate input components in Vue. For more information, please follow other related articles on the PHP Chinese website!