全局组件
如果在项目中,频繁的使用某个组件则可以用全局组件。
在Vue 项目的main.js 入口文件中,通过Vue.component()方法,可以注册全局组件。
// 导入需要注册的全局的组件
import Count from '@/components/Count.vue'
// 参数1:字符串形式,表示组件的“注册名称”
// 参数2:需要被全局注册的那个组件
Vue.component('MyCount',Count)
组件的props
props是组件的自定义属性,在封装通用组件的时候,合理的使用props可以极大的提高组件的复用性,语法格式如下:
<script>
export default{
// props 是自定义属性,允许用户通过自定义属性指定初始值
props:['init'],
data(){
return { count:0}
},
methods:{
Add(){
this.count++;
}
}
}
</script>
Vue规定:组件中封装的自定义属性是只读的,不能直接修改props的值,否则会报错。要想修改props的值,可以把props的值转存到data中,因为data可以读写。
<template>
<div class="Count-Container">
<h5> Count组件</h5>
<p>Count的值是: {{ count }}</p>
<button @click="Add">+1</button>
</div>
</template>
<script>
export default{
// props 是自定义属性,允许用户通过自定义属性指定初始值 init可以任意取
props:['init'],
data(){
return { count : this.init}
},
methods:{
Add(){
this.count ++;
}
}
}
</script>
要点1:在声明自定义属性时,可以通过default来定义属性的默认值
export default{
props:{
init:{
// 外界没有传默认值得时候,用default属性来数值默认值
default:0
}
},
data(){
return { count : this.init}
},
methods:{
Add(){
this.count ++;
}
}
}
要点2:props 的type值类型,可以通过type来定义属性的值类型。
export default{
props:{
init:{
// 用default属性来数值默认值
default:0,
// init 的值必须是number 类型,不然就报错
type:Number
}
},
data(){
return { count : this.init}
},
methods:{
Add(){
this.count ++;
}
}
}
要点3:props的required 必填项校验
<script>
export default{
props:{
init:{
// 用default属性来数值默认值
default:0,
// init 的值必须是number 类型
type:Number,
// 必填的校验
required:true
}
},
data(){
return { count : this.init}
},
methods:{
Add(){
this.count ++;
}
}
}
</script>
组件之间的样式冲突问题
默认情况下,写在.Vue组件中的样式是全局生效的,因此很容易造成多个组件之间的样式冲突问题。一般解决方法是,在style 标签属性加 scoped
<style lang="less" scoped>
.left-container{
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex:1;
}
</style>
当使用第三方组件库的时候,如果有修改第三放组件默认样式的需求,需要用到/deep/
<style lang="less" scoped>
.left-container{
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex:1;
}
/deep/ h5 {
color: pink;
}
</style>