VUE注册局部组件

简介: 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>
相关文章
|
5天前
|
JavaScript
Vue.js中实现自定义组件的双向绑定
Vue.js中实现自定义组件的双向绑定
|
5天前
|
JavaScript
Vue.js中使用作用域插槽实现自定义表格组件
Vue.js中使用作用域插槽实现自定义表格组件
|
9天前
|
JavaScript
vue强制刷新组件
vue强制刷新组件
19 0
|
10天前
|
JavaScript
|
10月前
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
|
9月前
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
51 0
|
10月前
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
|
10月前
|
JavaScript
vue 组件传值
vue 组件传值
58 0
|
10月前
|
JavaScript
vue父子组件传值
vue父子组件传值
|
JavaScript
vue兄弟组件传值 方便快捷
vue兄弟组件传值 方便快捷