vue组件封装

1.路径引用

1../：当前目录

import router './router'

2.../:上一级目录
3.@代表在相同文件下绝对路径

import {serverURL} from '@/js/assets.js

2.组件注册

1.全局注册组件

Vue.components('my-form-item', MyFormItem)

MyFormItem为文件夹，里面可建立index.js放置多个组件的导出

3.import、export

3 组件封装

创立一个VUE.template，div（在div根标签里面放置组件）。可对组件进行大量的自定义修饰。
1.1 在其他地方引用时：

import 名字 from '@/view/.../index.vue'

1.2 为输入的变量重新取一个名字，import命令使用as关键字，将输入的变量重命名

    import { lastName as surname } from './xx.js'

2.1在本地导出时：

export default {
    data() {},
    components: {},
    computed: {},
    props: {},
    methods: {},
    watch: {}
}

2.多个组件导出，建立新的js文件：

    export { default as 文件名 } from './文件名.vue'

2.components

局部注册，仅在其作用域中可用的组件

4.props

在 Vue 中，父子组件的关系可以总结：
父组件通过 prop 给子组件下发数据，子组件通过事件给父组件向上发送消息。

4.1Prop验证:

可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。

要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组：

    props: {
        // 基础类型检测 (`null` 指允许任何类型)
        propA: Number,
        // 可能是多种类型
        propB: [String, Number],
        // 必传且是字符串
        propC: {
          type: String,
          required: true
        },
        // 数值且有默认值
        propD: {
          type: Number,
          default: 100
        },
        // 数组/对象的默认值应当由一个工厂函数返回
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

type 可以是下面原生构造器：String ，Number，Boolean，Function，Object，Array，Symbol。\

• type 也可以是一个自定义构造器函数，使用 instanceof 检测。

6.watch

监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

data:{
    a:1,
    b:{
        C:1
    }
}
watch:{
    a(val, oldVal){//普通的watch监听
       console.log("a: "+val, oldVal);
    }
    b:{//深度监听，可坚挺到对象、数组的变化
        handler(val, oldVal){
            console.log()
        }
        deep:true //true 深度监听
    }
    
}

7.pubsub

第三方的js库，消息的订阅（subscribe）和发布（publish）。适用任意组件间通信

7.1

使用方法：
1.安装pubsub: npm i pubsub-js
2.引入： import pubsub from 'pubsub-js'
3.接受数据：（） //谁接受谁订阅

mounted(){
    this.$pubsub.subscribe('xxx', this)
}

4.提供数据: this.$pubsub.publish('xxx', 数据)