Preliminary study on Vue component development

Register 1 component

There are two ways to register a component. The first is global registration and the second is local registration

#  Global registration 
Vue.component('my-component',{
  template: '<span>Hello</span>'
})

#  Local registration 
var child = {
  template: '<span>Hello</span>'
}
new Vue({
  //  Exactly 
  components:{
    my-component: child
  }
})

Note: Component registration must precede the creation of an Vue instance

Working with components

<div id="app">
  <my-component></my-component>
</div>

When we need to use data, data must be a function, otherwise an error will be reported. This is a rule of Vue, as follows

Vue.component('my-component',{
  template: '<span>{{message}}</span>',
  data:function(){
    return {message:'hello'}
  }
})

Messaging between components

When we encapsulate the component A, but the component A is nested with the component B, then the component AB forms the relationship between parent and child components. How should we let the parent component pass messages to the child components? Here we use an attribute value props, as follows

Vue.component('my-component',{
  props: ['message']
  template: '<span>{{message}}</span>'
})

#  Pass props Passing messages to child components 
<my-component message="Hello"></my-component>

In the above example, we passed parameters to subcomponents through props, which can really change the values of subcomponents. However, if we have such a requirement that the values of props are dynamically changed, then this static literal way of passing parameters cannot meet our needs. How to dynamically set the props value will be explained below

<div id="app">
  <input v-model="parentMsg"><br>
  <my-component v-bind:message="parentMsg">
</div>

Here, we bind our message to parentMsg through the command of v-bind, so that when our parentMsg changes, message will change in real time

Custom Events

If data is transferred between parent and child components through props, it seems that only one-way data transfer can be carried out, which can only be transferred from parent component to child component. If we need to transfer messages back from child component, we need to use custom events

#  Use v-on Bind custom events 
Vue.component('my-component',{
  template: '<button v-on:click="increment">{{counter}}</button>',
  data: function(){
    return {counter: 0}
  },
  methods: {
    increment: function(){
      this.counter += 1;
      this.$emit(increment);
    }
  }
})
new Vue({
  el: '#app',
  data: {
    //  Exactly 
    total:0
  },
  methods: {
    //  Exactly 
    incrementTotal: function(){
      this.total += 1;

    }
  }
})

<div id="app">
  //  Exactly 
  <p>{{total}}</p>
  <my-component v-on:increment="incrementTotal"></my-component>
</div>

Here, we click the button, Button display value will change, at the same time, the value of total will change dynamically, this is the sub-component return data instance, we click the button, will first execute onclick method of button, in onclick method, through this. $emit ('increment') to execute our custom events, if we need to add parameters in $emit, then we will be in $on () for callback processing

Next, we customize a form input control. We enter information in the input box and display it in the P tab.

What we usually use here

v-model="message"

In fact, it is a simplified version of the following statement, that is, grammar sugar

v-bind:value="message" v-on:input="message = arguments[0]"

Or

v-bind:value="message" v-on:input="message = $event.target.value"

So what do we need to do to customize the form control?

In order for v-model to take effect, we need to define one value attribute in the subcomponent, and one input event generated by listening for new values
Let's take a look at our custom controls

<my-input label="Message" :value="message" @input="message = arguments[0]"></my-input>

Above, we bind an value through: value= "message" to hook it with the message of the upper level 1 component. The latter v-on: input is the event defined by the subcomponent, and the event name can be defined by itself. arguments [0] is the first parameter passed in when the component is customized

The complete code is as follows:

<div id="app">
  <my-component></my-component>
</div>

0

<div id="app">
  <my-component></my-component>
</div>

1

We called $emit () when we defined the internal event. In order for message to change dynamically, we need to return the input parameters, so that the external components and our form controls can display 1

The Vue component will be written here first, followed by event distribution, and then written again. Due to different understandings, some of them may be poorly written, so please correct them if there are mistakes.