Simplest declaration component

import Vue from 'vue'

new Vue({
  el: '#root'.template: '<div>123</div>'
})
Copy the code

Global Registry component

The official recommendation is to define component names with uppercase and camel case names and use lowercase hyphens when used in templates.

const component = {
  template: '<div>This is component</div>'
}

Vue.component('CompOne', component)

new Vue({
  el: '#root'.template: '<comp-one></comp-one>'
})
Copy the code

Locally registered component

Do this using the Components option in component Options.

const component = {
  template: '<div>This is component</div>'
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.template: '<comp-one></comp-one>'
})

Copy the code

When defining components, use data

When defining a component and using data to define data within the component (as opposed to new Vue()), data needs to be changed to function and return a separate object rather than using a global object.

const component = {
  template: '<div>{{text}}</div>',
  data () {
    return {
      text: 123}}}new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.template: '<comp-one></comp-one>'
})
Copy the code

When components are reused, data will be shared if they are not separate objects. In the following example, text data is shared.

const data = {
  text: 0
}
const component = {
  template: ` 
      
 
        
      
 `,
  data () {
    return data
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.template: ` 
      
 
        
        
      
 `
})

Copy the code

When defining a component, use props

Props defines the configurable behavior of a component when it is used externally.

Props Type Checking

Specifies the incoming data type.

If you use active=”true” instead of binding mode, the component is passed a string and vUE will issue a warning.

const component = {
  props: {
    active: Boolean
  },
  template: ` 
      
 
        
       see me if active 
      
 `,
  data () {
    return {
      text: 0}}}new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.template: ` 
      
 
        
        
      
 `
})
Copy the code

Props named

Use hump naming when naming

Use lowercase hyphens when used in templates (you can also use camel case in templates, in consultation with team members).

const component = {
  props: {
    propOne: String
  },
  template: ` 
      
 
       {{propOne}} 
      
 `
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.template: ` 
      
 
        
        
      
 `
})
Copy the code

Do not change props in child components

Vue warns that it is not correct to change the props inside the component because the external component is used to constrain the presentation behavior of the subcomponents.

const component = {
  props: {
    propOne: String
  },
  template: ` 
      
 
       {{propOne}} 
      
 `,
  mounted () {
    this.propOne = 'inner content'}}new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.template: ` 
      
 
        
        
      
 `
})
Copy the code

Modify the props

The child component raises an event to tell the parent component to change the props.

Pass the method through props

As follows, click on Text1 with an extra 1

const component = {
  props: {
    propOne: String.onChange: Function
  },
  template: ` 
      
 
       {{propOne}} 
      
 `,
  data () {
    return {
      text: 0}},methods: {
    handleChange () {
      this.onChange()
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.data: {
    prop1: 'text1'
  },
  methods: {
    handleChange () {
      this.prop1 += 1}},template: ` 
      
 
        
      
 `
})
Copy the code

through$emit

The common way to do this is to notify the parent component via $emit.

const component = {
  props: {
    propOne: String
  },
  template: ` 
      
 
       {{propOne}} 
      
 `,
  data () {
    return {
      text: 0}},methods: {
    handleChange () {
      this.$emit('change')}}}new Vue({
  components: {
    CompOne: component
  },
  el: '#root'.data: {
    prop1: 'text1'
  },
  methods: {
    handleChange () {
      this.prop1 += 1
    }
  },
  mounted () {
    console.log(this.$refs.comp1)
  },
  template: ` 
      
 
        
      
 `
})
Copy the code

Data validation for props

No validation

That’s simple, but it’s not rigorous

props: ['active'.'propOne']
Copy the code

Validate data types

props: {
    active: {
      type: Boolean
    },
    propOne: String //
  },
Copy the code

required

If required: true is set, active must transmit, or vUE warns.

props: {
    active: {
      type: Boolean.require: true}},Copy the code

default

Default is false by default. If set to true, it will set active to true when we do not pass active.

Default and Requied are not used together because of conflicting effects.

props: {
    active: {
      type: Boolean.default: true
    },
    propOne: String
  },
Copy the code

If props accepts an object, use default instead of function to return a separate object.

props: {
    obj: {
      type: obj
      dafault () {
          return{}}}},Copy the code

validator

With the validator, you can customize props for verification.

In the following example, vUE also validates the active data type.

props: {
    active: {
      validator (value) {
        return typeof value === 'boolean'}}},Copy the code

conclusion

Component definition method, specification, naming specification, props specification