使用vue.component全局注册组件、props的使用

通过components注册的是私有子组件

例如：
在组件A的 components 节点下，注册了组件F。

则组件F只能用在组件A中;不能被用在组件C中。

注册全局组件

 在vue项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下:

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'
//参数1:字符串格式，表示组件的"注册名称"
//参数2:需要被全局注册的那个组件
Vue.component('MyCount' , Count);

 注意：在自己的组件里不能使用自己;

插件：

Vue组件代码自动生成安装：Vue VSCode Snippets和Vetur插件。

 

 组件的props

 props是组件的自定义属性,在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性!
它的语法格式如下:

export default {
    // 组件的自定义属性
    props: ['自定义属性A', '自定义属性B', '其它自定义网性...'],

    // 组件的私有数据
    data() {
        return { }
    }
}

应用案例： 

props 是只读的

 vue规定:组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会直接报错:

 

 要想修改props的值，可以把props的值转存到data中，因为data中的数据都是可读可写的!

props: ['init'],
data() {
    return {
        count: this.init // 把this.init的值转存到count 
    }
}

Props----default默认值

 对象的格式：

 props的type值类型

 在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下:

export default {
    props: {
        init: {
            //用 default 属性定义属性的默认值
            default: 0,
            //用type 属性定义属性的值类型，
            //如果传递过来的值不符合此类型，则会在终端报错
            type: Number
        }
    }
}