Vue component related knowledge learning

Vue.js components
// Components are one of the most powerful features of Vue.js.
// Components can extend HTML elements, encapsulating reusable code.
// The component system allows us to build large applications with independent and reusable small components, and the interface of almost any type of application can be abstracted into a component tree:

// The syntax for registering a global component is as follows:
 Vue.component(tagName, options)
// tagName is the component name, options are configuration options. Once registered, we can invoke the component using:
<tagName></tagName>
// global component
// All instances can use the global component.
// global component instance
// Register a simple global component runoob and use it:
<div id="app">
    <runoob></runoob>
</div>


// register
Vue.component('runoob', {
  template: '<h1>Custom component!</h1>'
})
// create root instance
new View({
  from: '#app'
})
</script>


// local component
// We can also register partial components in the instance options, so that the component can only be used in this instance:
// local component instance
// Register a simple partial component runoob and use it:
<div id="app">
    <runoob></runoob>
</div>


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

// create root instance
new View({
  el: '#app',
  components: {
    // <runoob> will only be available in the parent template
    'runoob': Child
  }
})


// Prop
// prop is a custom property used by the parent component to pass data.
// The data of the parent component needs to pass the data to the child component through props, and the child component needs to explicitly declare "prop" with the props option:
// Prop instance
<div id="app">
    <child message="hello!"></child>
</div>

// register
Vue.component('child', {
  // declare props
  props: ['message'],
  // can also be used in vm instance like "this.message"
  template: '<span>{{ message }}</span>'
})
// create root instance
new View({
  from: '#app'
})


// Dynamic Prop
// Similar to binding HTML properties to an expression with v-bind, you can also use v-bind to dynamically bind the value of props to the parent component's data. Whenever the data of the parent component changes, the change is also propagated to the child component:
// Prop instance
<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>


// register
Vue.component('child', {
  // declare props
  props: ['message'],
  // can also be used in vm instance like "this.message"
  template: '<span>{{ message }}</span>'
})
// create root instance
new View({
  el: '#app',
  data: {
    parentMsg: 'parent component content'
  }
})


// The following example uses the v-bind directive to pass todo to each duplicated component:
// Prop instance
<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>

Vue.component('todo-item', {
  props: ['everything'],
  template: '<li>{{ todo.text }}</li>'
})
new View({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})

// Note: props are one-way bound: when a property of the parent component changes, it will be propagated to the child component, but not the other way around.
// Prop validation
// Components can specify validation requirements for props.
// When prop is an object rather than an array of strings, it contains validation requirements:
Vue.component('example', {
  props: {
    // Basic type checking (`null` means any type is fine)
    propA: Number,
    // multiple types
    propB: [String, Number],
    // Required and is a string
    propC: {
      type: String,
      required: true
    },
    // number, with default value
    propD: {
      type: Number,
      default: 100
    },
    // The default value of the array/object should be returned by a factory function
    near: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validation function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})
// type can be one of the following native constructors:
// String
// Number
// Boolean
// Function
// Object
// Array
// type can also be a custom constructor, detected using instanceof.
// custom event
// The parent component uses props to pass data to the child component, but if the child component wants to pass data back, it needs to use a custom event!
// We can use v-on to bind custom events, each Vue instance implements the Events interface, namely:
// Use $on(eventName) to listen for events
// use $emit(eventName) to trigger the event
// In addition, the parent component can use v-on directly where the child component is used to listen to the events triggered by the child component.
// The child component in the following example has been completely decoupled from its outside. All it does is fire an internal event that the parent component cares about.
// instance
<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>


Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new View({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})