Vue学习之 ---初识组件2

全局组件

如果在项目中，频繁的使用某个组件则可以用全局组件。

在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>