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>
相关文章
|
14天前
|
JavaScript
Vue.js中实现自定义组件的双向绑定
Vue.js中实现自定义组件的双向绑定
|
14天前
|
JavaScript
Vue.js中使用作用域插槽实现自定义表格组件
Vue.js中使用作用域插槽实现自定义表格组件
|
21小时前
|
JSON 移动开发 JavaScript
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
|
18天前
|
JavaScript
vue强制刷新组件
vue强制刷新组件
26 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1004 0
|
4天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
9天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
70 7
使用 Vue CLI 脚手架生成 Vue 项目
|
7天前
|
JavaScript
|
7天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
14 2
|
10天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
14 1