// 局部组件命名规范
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
}
}
}
}
在某个组件中使用局部组件
<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>
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识