vue 私有，全局组件，props自定义属性

组件的使用

设置私有组件
根组件使用子组件的方式。

1. 在跟组件中使用 import 导入之后定义的名字 from ‘组件的位置’
2. 在跟组件中使用components注册私有组件

export default {
     compoments:{
         //导入组件之后的名字
    }
}

3. 最终将注册的组件以标签的形式写入

设置全局组件

1. 首先在main.js中导入要设置的全局组件，在使用vue.component(）方法。

import '导入之后的设置的组件名' from '设置全局组件的路径位置';
Vue.component("全局组件新名字", '导入之后要设置的组件名')

props自定义属性

在使用者自己封装组件之后，并且设置了全局组件，如果多个组件(不能自己调用自己的组件)都是用封装组件的属性，但是属性的值都是在封装组件里面设置好的，使用后的属性都是一样的，但使用者的组件需要自己设置属性。则就需要在封装的组件中设置props。

注意props自定义属性是只读的，不能修改props的值，否则会报错

封装的组件，导出的组件名为Myweb：

<template>
      <div id="app">
           <p>{{num}}</p>
           //下面的点击事件中如果只有一条语句，直接可以写在行内里面
           <button @click="index +=1">点击</button>
      </div>
</template>

<script>
export default {
     props:['num'],
     data() {
         return {
              index :0
         }
     },
}
</script>

使用者使用封装的组件：

<template>
      <div id="app">
          <Myweb num="9"></Myweb>
      </div>
</template>

如果props只能读取，不能修改则毫无意义，所以将props设置成可以修改的值。

<template>
      <div id="app">
         <p>{{index}}</p>
         <button @click="index +=1">点击+1</button>
      </div>
</template>

<script>
export default {
     props:['num'],
     data() {
         return {
              index:this.num
         }
     },
}
</script>

使用者使用封装的组件

<template>
      <div id="app">
      //可以在num前面v-bind必须加上
         <Myweb :num="6"></Myweb>
      </div>
</template>

如果使用者在自定义属性时，直接调用这个封装的组件，没有给定自定义属性的值，最终会显示undefined。可以对自定义属性设置一个默认值，直接将props改写成对象。

<script>
export default {
     props:{
        //  自定义属性名:{配置选项}
         num:{
             //如果用户没有指定属性的值，会默认将自定义属性值设置为2
             default: 2，
             //现在的num值必须时数字型
             type:Number，
             //必填项，使用者必须给num转递值，否则会报错
              required:true
         }
     },
     data() {
         return {
              index:this.num
         }
     },
}
</script>