VUE注册局部组件

    // 局部组件命名规范
      1文件名大驼峰 MyLocalBtn.vue
      2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn>

MyLocalBtn.vue局部组件

<template>
    <div>
        <div>我输局部组件---{{valuea}}</div>
    </div>
</template>

<script>
    export default {
        name:"my-local-btn",
        data(){
            return{

            }
        },
        props:{

　　　　　　　valueaa:{

                type:Number | String,  //类型 字符串或者是数组

                required:true,//这个参数必须传递 否者会警告

                default:40,

                // 自定义校验器

                validator:(value)=>{

                    return value >  10

                }

            }

      }
}

</script>

 

在某个组件中使用局部组件

<template>
    <div>
        <!-- 使用局部组件 -->
        <my-local-btn valuea="新增数据"></my-local-btn>
    </div>
</template>

<script>
import MyLocalBtn from   "../../components/cuscom/MyLocalBtn";  //引入局部组件
    export default {
        data(){
            return{

            }
        },
        components: {
            'my-local-btn': MyLocalBtn  //引入局部组件 通过components组件
        },

    }
</script>