A preliminary study on Vue component development

Register a component

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

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

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

Note: Component registration must be before Vue instance is created

Usage Components

<div >
  <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

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

Message delivery between components

When we encapsulate component A, but component A nests component B, component AB forms a parent-child component relationship. How should we let the parent component pass messages to the child component? Here a property value props is used, as follows

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

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

In the above example, we pass parameters to subcomponents through props, which can indeed change the value of subcomponents. However, if we have such a requirement that the value of props is dynamically changed, then this way of passing parameters by static literals cannot meet our needs. The following will explain how to dynamically set props value

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

Here, we bind our message to parentMsg through the v-bind command. In this way, when our parentMsg changes, the message will be able to change in real time.

Custom events

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

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

    }
  }
})

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

Here, when we click the button, the value of the button will change, and the value of total will change dynamically. This is an example of the subcomponent returning data. When we click the button, we will first execute the button's onclick method. In the onclick method, we will execute our customized events through this.$emit('increment'). If we need to add parameters in $emit, then we will handle the callback in $on().

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

We usually use this

v-model="message"

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

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

or

v-bind:value="message" v-on:input="message = $"

So what do we need to do to customize form controls?

In order for v-model to take effect, we need to define a value property in the child component and an input event that listens to the new value generated
Let's take a look at our custom controls

In the above, we bind a value through :value="message" to link it to the message of the previous component. The subsequent v-on:input is an event defined by the child component. 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:

# Use custom event form input controls('my-input',{
  template: '\
  <div>\
  <label>{{label}} :</label>\
  <input v-bind:value="value" v-on:input="onInput"></input>\
  </div>\
  '
  ,
  props:['value','label'],
  methods:{
    onInput:function(event){
      this.$emit('input',);
      // this.$emit('input')
    }
  }

})

<div >
  <p>{{message}}</p>
  <my-input label="Message" v-model="message"></my-input><br>
  <!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> -->

</div>

When we define internal events, we call $emit(). In order for the message to be dynamically changed, we need to pass the input parameters back so that the external components are consistent with our form control.

This is what the Vue component says first, and there is event distribution, so I will write it next. Due to different understandings, there may be some poor writing, so please correct any errors.