Component Basics

A component is a reusable Vue instance with a name: in the current example it is <button-counter>. We can use to new Vue create a Vue root instance, and then use this component as a custom element in it.

Since components are reusable Vue instances, they receive the new Vue same options as at the moment, such as data, computed, watch, methods and lifecycle hooks. The only exceptions are el root-specific options like this.

`data` must be a function

The component's data option must be a function, so that each instance can maintain an independent copy of the data of the "data object returned by the function",

If Vue does not follow this rule, clicking one of the buttons will affect all other component instances that use this data ,

There are two ways to register components: global registration and local registration.

Globally registered components can be used in all subsequent ( new Vue created) Vue root instances, as well as inside all child components in the Vue instance's component tree.

Pass data to child components using props

new View({
  from: '# blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My Vue Journey' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Vue is so fun' },
    ]
  }
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

Use events to send messages to parent components

new View({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1　　　　　　　　　　　　　　　　　　　　　　　　　　//Define an object to use as the font size
  }
})

< div id ="blog-posts-events-demo" > 
  < div :style ="{ fontSize: postFontSize + 'em' }" >　　　　　　　　// Dynamically bind the style attribute, which can be updated in time once the data is passed in
     < blog-post
       v-for ="post in posts" 
      v-bind:key ="post.id" 
      v-bind:post ="post" 
      v-on:enlarge-text ="postFontSize += 0.1"   　　　　　　　　　　// Monitor enlarge -text event, which is executed when triggered. 
    ></ blog-post > 
  </ div > 
</ div >

Vue.component('blog-post', {
  props: ['post'],
  template: `
    < div class ="blog-post" > 
      < h3 > {{ post.title }} </ h3 > 
      < button v-on:click ="$emit('enlarge-text')> // Add a click event, and Return this event to the parent component's enlarge-text event
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

Send a value in the event event

Sometimes, you want to send a specific value in the event event. For example, we might want <blog-post> to control the spacing of the enlarged text font size within the component itself. In this case, we can use $emit the second parameter to provide the font size interval value:

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

<blog-post
  ...
  v-on:enlarge-text ="postFontSize += $event" //At this time, $event is the incoming value of 0.1 
></ blog-post >

Or, if the event handler is a method:

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

methods: {
  onEnlargeText: function (enlargeAmount) { //At this time, the value passed in by $event will be used as the first parameter of the method, here is enlargeAmount
    this.postFontSize += enlargeAmount
  }
}

use in component `v-model`

Custom events can also be used to create " v-model custom input boxes that implement mechanisms"

< input v-model ="searchText" > is 


equivalent to the following: // equivalent in full sense　　

< input
   v-bind:value = "searchText" 　　　　　　　　　　　　　　　　　　//Bind the value of value and searchText (that is, update value in real time with searchText) 
  v-on:input = "searchText = $event.target.value"　　　　　　　　//Set the value Assign to searchText
 > 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//The above realizes the two-way binding of searchText and value

The same is true when used for a component.

In order to function effectively inside a component, the inside of the component <input> must:

value Bind properties to value props
In the input input box, in the custom input event, send a new value

Here is what is described above:

Vue.component('custom-input', {
  props: ['value'], 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//2. Accept the value passed by the parent component
  template: `
    < input
       v-bind:value = "value" 　　　　　　　　　　　　　　　　　　　　　　　　　　　　//3. Assign the received value to the value of the input box 
      v-on:input = "$emit('input', $event.target.value) 　　　　　　　　　　　　//4 .Listen to input and return an event named input and the value of the current DOM to the parent component
    >
  `
})


<custom-input
  v-bind:value=" searchText" //1. Bind searchText to value
  v-on:input = "searchText = $event"    　　　　　　　　　　　　　　　　　　　　　　//5. Accept the subcomponent to trigger the input, and assign the value passed by the subcomponent to searchText
 ></ custom-input > 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//The above five points effectively realize the subcomponent and The parent component is completely copied, which means that v-module can also be used in the parent component.

 Therefore, the parent component is replaced with a more concise form as follows.

<custom-input v-model="searchText"></custom-input>

Content distribution using slots

With Vue's <slot> custom elements, this task can be achieved very simply:

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

<alert-box>
  Some errors occurred.
</alert-box>

will be rendered as the following result:

dynamic components

By passing attributes to Vue <component> elements ,is

<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component>

By changing the value of :is, the component selection can be changed. //By the way, isn't this vue-router?

DOM template parsing considerations

Some HTML elements, such as <ul>, <ol>, <table> and <select> these elements, restrict the elements that appear inside them; while other HTML elements, such as <li>, <tr> and <option> these elements, can only appear inside those preceding elements.

Using components inside these restricted elements can cause problems due to how HTML works.

Custom components <blog-post-row> are treated as invalid content and are hoisted out of the table element, causing errors in the final rendered output. Fortunately, is traits provide a solution:

<table>
  <tr is="blog-post-row"></tr>
</table>

It should be noted that these restrictions no longer apply in scenarios where one of the following string templates is used :

String template (for example template: '...')
single file ( .vue) component
<script type="text/x-template">

VUE2 Chinese Documentation: Component Basics