1. Path reference

1.. / : Current directory

import router './router'
Copy the code

2… @ indicates the absolute path to the same file

import {serverURL} from '@/js/assets.js
Copy the code

2. Register components

1. Register components globally

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

MyFormItem is a folder in which you can create index.js to hold multiple component exports

3. The import and export

3 Component Encapsulation

Create a vue. template, div (place the component inside the div root tag). A large number of custom modifications can be made to components. 1.1 When quoted elsewhere:

importThe namefrom '@/view/... /index.vue'
Copy the code

1.2 Rename the input variable. The import command uses the as keyword to rename the input variable

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

2.1 Local Export:

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

2. Export multiple components and create a new JS file:

    export { default asThe file name}from './ filene.vue '
Copy the code

2.components

Local registration of components that are only available in their scope

4.props

In Vue, the parent-child relationship can be summarized: the parent sends data to the child through prop, and the child sends messages up to the parent through events.

4.1 Prop validation:

Validation rules can be specified for a prop of a component. Vue will issue a warning if the incoming data does not meet the requirements.

To specify validation rules, define prop as an object, not as a string array:

    props: {
        // Base type detection (' null 'means any type is allowed)
        propA: Number.// Can be multiple types
        propB: [String.Number].// Must be a string
        propC: {
          type: String.required: true
        },
        // A value with a default value
        propD: {
          type: Number.default: 100
        },
        // The default value of array/object should be returned by a factory function
        propE: {
          type: Object.default: function () {
            return { message: 'hello'}}},// Customize the validation function
    propF: {
      validator: function (value) {
        return value > 10}}}Copy the code

Type can be the following native constructors: String, Number, Boolean, Function, Object, Array, Symbol. \

  • typeCan also be a custom constructor function, usinginstanceofDetection.

6.watch

Monitor the transformation of a value and call the methods that need to be executed because of the change. You can change the state of the association dynamically through Watch.

data:{
    a:1.b: {C:1}}watch: {a(val, oldVal){// Normal watch listener
       console.log("a: "+val, oldVal);
    }
    b: {// Deep monitor, can be strong to object, array changes
        handler(val, oldVal){
            console.log()
        }
        deep:true //true}}Copy the code

7.pubsub

Third party JS library, message subscribe and publish. Applicable to communication between any components

7.1

1. Install pubsub: NPM I pubsub-js 2. Import: import pubsub from ‘pubsub-js’ 3. Accept data :() // who accepts who subscribes

mounted(){
    this.$pubsub.subscribe('xxx'.this)}Copy the code

This.$pubsub.publish(‘ XXX ‘, data)