• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Component based

What are components?

If a component is a reusable Vue instance with a name, such as Shanshan-cMP, we can use this component as a custom element in a root instance created with new Vue:

<div id="app">
  <shanshan-cmp></shanshan-cmp>
</div>
Copy the code

const vm = new Vue({
  el: '#app'
})
Copy the code

Because components are reusable Vue instances, they receive the same options as new Vue, such as Data, computed, Watch, Methods, and lifecycle hooks. The only exceptions are root instance-specific options like EL.

The component registration

Global components

Vue.component

Components created with Vue.com Ponent components are registered globally. That is, they can be used in the template of any newly created Vue root instance (New Vue) after registration.

Parameters:

• {string}
• {Function | Object} [definition]

Usage: Register or get global components. The registration also automatically sets the name of the component with the given ID.

Example:

<div id="app">
  <button-counter></button-counter>
</div>
Copy the code

Vue.component('button-counter', {
  data () {
    return {
      count: 0,}},template: ` < button @ click = "count + +" > you rang I {{count}} < / button > `
})

const vm = new Vue({
  el: '#app',})Copy the code

Local components

Define the components to use in the Components option. For each attribute in the Components object, its attribute name is the name of the custom element, and its attribute value is the component’s option object.

Example:

<div id="#app">
  <button-counter></button-counter>
</div>
Copy the code

const buttonCounter = {
  data () {
    return {
      count: 0}},template: ` < button @ click = "count + +" > you rang I {{count}} < / button > `,}const vm = new Vue({
  el: '#app'.components: {
    'button-counter': buttonCounter
  }
})
Copy the code

Component name

When registering a component, we always need to give it a name. The name you give to a component may depend on what you intend to do with it, so naming is semantic.

Component name case

There are two ways to define component names:

Use kebab-case (horizontal dash delimited name)

Vue.component('my-component', { / * * * / });
Copy the code

When defining a component using kebab-case, you must use kebab-case when referencing the custom element, for example:
.

Use PascalCase (big hump name)

Vue.component('MyComponent', { / * * * / });
Copy the code

When defining a component using PascalCase, you can use either nomenclature when referencing the custom element.

and

are both acceptable. Note, however, that only kebab-case is valid when used directly in the DOM (that is, a string template or a single-file component).

Also: We strongly recommend following the W3C specification for custom component names (all lowercase and must contain a hyphen). This will help you avoid conflicts with current and future HTML elements.

Component reuse

Components can be reused any number of times:

<div id="#app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
Copy the code

Self-closing assembly

Components that have no content in single-file components, string templates, and JSX should be self-closing — but never in DOM templates.

Self-closing components indicate that they not only have no content, but intentionally have no content. The difference is like a blank page in a book compared to a blank page labeled “this page is intentionally blank.” And without the extra closing tag, your code is much cleaner.

Unfortunately, HTML does not support self-closing custom elements — only official “empty” elements. So the above strategy only applies where Vue’s template compiler can reach before entering the DOM, and then producing HTML that conforms to the DOM specification.

Component’s data option

When we define a component, its data does not directly provide an object like this:

data: {
  count: 0
}
Copy the code

Instead, a component’s data option must be a function, so each instance can maintain a separate copy of the returned object:

data () {
  return {
    count: 0}}Copy the code

If Vue does not have this rule, clicking a button may affect all other instances as follows:

​

Single root element

Each component must have only one root element, and when the template element is greater than 1, the template’s contents can be wrapped in a parent element.

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

• Welcome to discuss in the comments section, the excavation officials will draw 100 nuggets in the comments section after the end of the Excavation project activity, see the details of the lucky draw in the event article, friends to discuss!!