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. \
-
type
Can also be a custom constructor function, usinginstanceof
Detection.
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)