Vue.js component

Component is one of the most powerful functions of Vue.js.

Components can extend HTML elements and encapsulate reusable code.

<template>
  <div id="app">
    <!-- Use custom components -->
    <runoob></runoob>

  </div>
</template>

<script>
import Vue from 'vue'

// Register components
Vue.component('runoob', {
  template: '<h1>Custom components!</h1>'
})

var count=1;
export default {
  name: 'App',
  data(){
    return{
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

You can also register a local component in the instance option, so that the component can only be used in this instance:

<template>
  <div id="app">
    <!-- Use custom components -->
    <runoob></runoob>

  </div>
</template>

<script>
import Vue from 'vue'

var Child = {
  template: '<h1>Custom components!</h1>'
}

var count=1;
export default {
  name: 'App',
  data(){
    return{
    }
  },
  components:{
    'runoob':Child
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

prop is a custom property used by a child component to accept the data passed by the parent component.

The data of the parent component needs to be passed to the child component through props. The child component needs to explicitly declare "prop" with props option:

<template>
  <div id="app">
    <!-- Use custom components -->
    <child msg="hello,cyy"></child>

  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('child',{
  props:['msg'],
  template:'<span>{{msg}}</span>'
})

var count=1;
export default {
  name: 'App',
  data(){
    return{
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

Similar to using v-bind to bind HTML features to an expression, you can also use v-bind to dynamically bind the value of props to the data of the parent component. Whenever the data of the parent component changes, the change is also transmitted to the child component:

<template>
  <div id="app">
    <input type="text" v-model="info">
    <!-- Use custom components -->
    <child v-bind:msg="info"></child>

  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('child',{
  props:['msg'],
  template:'<span>template content: {{msg}}</span>'
})

var count=1;
export default {
  name: 'App',
  data(){
    return{
      info:''
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

The following example uses the v-bind instruction to pass the item to each duplicate component:

<template>
  <div id="app">
    <!-- Use custom components -->
    <child v-for="(item,index) in list" :key="index" v-bind:msg="item.name"></child>

  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('child',{
  props:['msg'],
  template:'<span>{{msg}}<br></span>'
})

var count=1;
export default {
  name: 'App',
  data(){
    return{
      list:[
        {
          name:'cyy1'
        },
        {
          name:'cyy2'
        },
        {
          name:'cyy3'
        }
      ]
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

Note: prop is one-way bound: when the properties of the parent component change, it will be passed to the child component, but not vice versa.

Components can specify validation requirements for props.

To customize the verification method of props, you can provide an object with verification requirements for the values in props, rather than an array of strings. For example:

Vue.component('my-component', {
  props: {
    // Basic type check ('null' and 'undefined' will pass any type verification)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with default
    propD: {
      type: Number,
      default: 100
    },
    // Objects with default values
    propE: {
      type: Object,
      // Object or array defaults must be obtained from a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // Custom validation function
    propF: {
      validator: function (value) {
        // This value must match one of the following strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

When the verification of prop s fails, Vue will generate a console warning.

type can be the following native constructor:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type can also be a custom constructor, using instanceof detection.

The parent component uses props to pass data to the child component, but if the fruit component wants to pass data back, it needs to use custom events!

We can use v-on to bind custom events. Each Vue instance implements the events interface, which is:

• Use $on(eventName) to listen for events
• Use $emit(eventName) to trigger events

In addition, the parent component can directly use v-on to listen for events triggered by the child component where the child component is used.

In the following example, the sub component has been completely decoupled from its external part. All it does is trigger an internal event that the parent component cares about.

<template>
  <div id="app">
    <!-- Use custom components -->
    <child @add-count="addCount"></child>
    <child @add-count="addCount"></child>
    <p>{{total}}</p>
  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('child',{
  template:'<button @click="addNum">click me</button>',
  data(){
    return{
      num:0
    }
  },
  methods:{
    addNum(){
      this.num+=1;
      this.$emit('add-count');
    }
  }
})

var count=1;
export default {
  name: 'App',
  data(){
    return{
      total:0
    }
  },
  methods:{
    addCount(){
      this.total+=1;
    }
  },
}

</script>

<style scoped>

</style>

If you want to listen for a native event on the root element of a component. You can use. Native to decorate v-on. For example:

<my-component v-on:click.native="doTheThing"></my-component>

When a child component triggers a parent component's method through $emit, if you need to pass parameters, you can add optional parameters after the method name, separated by commas.

For example, $emit("FunctionName") when passing parameters: $emit("FunctionName",[arg1,arg2...]).