<template>

     <div class='div-input-out'>

         <label>{{labelText}}</label>

         <input class='div-input' type='text' :placeholder=pl :class='clazz' :style="{fontSize:fontSize+'px'}" v-model:value="value"

          v-on:keyup='keyups'>

     </div>

 </template>

 <script>

     /* eslint-disable */

     // eslint-disable-next-line

     export default {

         props:                             　　　　　  //定义props,为组件的属性,改属性可以是自定义属性,可以是element属性,可以是style,可以是class

                                         　　　　　　   //定义props的目的为了让父组件能够获取该内容,该vue的props定义,相当于java中的接口,具体值可以在这里定义默认值,可以在父组件中再定义或修改

             [                             　　　　　   //未详细定义都为string类型的props,若要定义每种props的具体类型,使用json格式

                 'labelText',             　　　　　　  //自定义一个label的内容

                 'pl',                     　　　　　　 //使用一个属性placeholder

                 'value',                 　　　　　　  //绑定一个值

                 'fontSize',             　　　　　   　//绑定一个style,font-size改为fontSize格式,类似style都以此方式修改定义

                 'clazz',                 　　　　　　  //绑定一个class

             ],

         name: 'div-input',                 　　　　　　//组件的标签名

         methods: {

             keyups: function() {         　　　　　　  //定义一个keyup函数

                 console.log(this._props.value); 　　  //子组件中keyup函数中获取初始化的value

             }

         },

     }

 </script>

 <style scoped>

     /*固定的style,不进行修改的内容*/

     .div-input-out {

         margin: 10px;

     }

     .div-input {

         height: 25px;

         width: 400px;

         border-radius: 4px;

         padding: 5px 20px;

         outline: none;

     }

 </style>

 <template>

     <div id='app'>

         this is my first demo

         <button v-on:click="testClick()">测试获取value</button>

         <hr>

         <!--复用组件-->

         <!--复用组件:    labelText动态赋值-->

         <!--复用组件:    pl静态赋值-->

         <!--复用组件:    value动态绑定-->

         <!--复用组件:    fontsize静态赋值-->

         <!--复用组件:    clazz动态赋值-->

         <lyh-input :labelText='input01.labelText' pl='请输入01' :value='input01.value' :fontSize='22' :clazz='input01.clazz'></lyh-input>

         <lyh-input :labelText='input02.labelText' pl='请输入02' :value='input02.value' :fontSize='16' :clazz='input02.clazz'></lyh-input>

     </div>

 </template>

 <script>

     /* eslint-disable */

     // eslint-disable-next-line

     import lyhInput from './components/input'                 //导入lyhInput

     export default {

         name: 'App',

         data: function() {

             return {

                 input01: {                                     //第一个input

                     labelText: '第一个输入框的标题',        　　 　//动态赋值props属性

                     clazz: 'meClazz',                          //动态赋值clazz属性给class

                     value: '001',                              //动态赋值value

                 },

                 input02: {

                     labelText: '第二个输入框的标题',

                     clazz: 'meClazz',

                     value: '002',

                 },

             }

         },

         methods: {

             testClick: function() {                            //这里修改vue对象或属性

                 console.log(this.$children[0]);             　　//获取当前子组件vue对象

                 console.log(this.$children[1]);

                 console.log(this.$children[0].$props);         //获取当前子组件props对象

                 console.log(this.$children[1].$props);

                 console.log(this);                             //获取当前vue对象

                 console.log(this.$el);                         //获取当前vue对象对应的element自身的dom对象

             },

         },

         components: {

             lyhInput,

         }

     }

 </script>

 <style>

     #app {

         font-family: 'Avenir', Helvetica, Arial, sans-serif;

         -webkit-font-smoothing: antialiased;

         -moz-osx-font-smoothing: grayscale;

         color: #2c3e50;

         margin-top: 60px;

         text-align: center;

     }

 </style>