练习1-自定义input组件库知识要点

练习1-自定义input组件库知识要点

一、组件作为插槽使用

<template>
    <div class="Index">
        <h1>Index</h1>
        <CForm :model="model" :rules="rules" ref="formDomBox">
            <CFormItem labelTitle="用户名" rulekey="username">
                <Cinput v-model="model.username"></Cinput>
            </CFormItem>
            <CFormItem labelTitle="登录密码" rulekey="password">
                <Cinput v-model="model.password" type="password"></Cinput>
            </CFormItem>
            <CFormItem>
                <button @click="loginAct">登录</button>
            </CFormItem>
        </CForm>
    </div>
</template>
<script>
    import Cinput from '@/components/Cinput.vue'
    import CFormItem from '@/components/CFormItem.vue'
    import CForm from '@/components/CForm.vue'
    export default {
        name: 'Index',
        data() {
            return {
                model: {
                    username: 'johnli',
                    password: ''
                }
        },
        components: {
            Cinput,
            CFormItem,
            CForm
        }
    }
</script>

二、实现双向绑定三个关键api

1、:value
2、@input
3、$attrs是出props以外的属性值

子组件Cinput
<template>
    <div class="Cinput">
        <input :value="value" @input="onInput" v-bind="$attrs">
    </div>
</template>
<script>
    export default {
        name: 'Cinput',
        props: {
            value: String,
        },
        methods: {
            onInput(e) {
                this.$emit('input', e.target.value);
            }
        }
    }
</script>

父组件
<template>
    <div class="Index">
        <Cinput v-model="model.password" type="password"></Cinput>
    </div>
</template>

三、禁止顶层容器继承子元素属性

inheritAttrs:false

 export default {
        inheritAttrs:false,
        name: 'Cinput',
    }

四、祖孙之间的传值

1、provide => inject
2、注意：可以在开发组件库中使用，不建议在应用项目中使用

祖先级别的组件
<template>
    <div class="CForm">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        provide(){
            return {
                marktitle:'这是一个标题'
            }
        },
    }
</script>

孙子级别的组件
<template>
    <div class="CFormItem">
        <p >{{markValue}}</p>
    </div>
</template>
<script>
    export default {
        inject: ['form'],
        data() {
            return {
                markValue: ''
            }
        },
        mounted() {
           let markValue= this.form.marktitle;
        }
    }
</script>

五、eleme验证库async-validator

//安装 async-validator
npm install async-validator -s

//应用
import Schema  from 'async-validator';

//调用
const desc= {
       username: [{
          required: true,
          message: '用户名必填'
      }]
 };
 const schema = new Schema(desc);
 schema.validate({username:'15525999@qq.com'},errors=>{
     if(errors){
         console.log('有错');
     }else{
         console.log('正确');
     }
 })