We’ve been using the VM object as a VUE component and the VM as the root component, but the actual component we’re using is not the root component. The root component is more for learning purposes.

Vue components

Components as the basis of componentized development help us to better collaborative development and project integration.

Getting to know custom components

The component here is our custom component, written in its original form.

    <div id="app">
        <div>{{msg}}</div>
        <juejin></juejin>
    </div>
Copy the code

        let vm = new Vue({
            el: '#app'.data: {
                msg: The '-',},components: {
                juejin: {
                    data() {
                        return {
                            text: 'Here's the component.'}},template: `<div>{{text}}</div>`.methods: {}}}});Copy the code

Effect:

Through the simple component writing method above, we find that the component object name in the components property is the component tag name, and the composition of the root component is almost the same, including data and methods.

However, we still find different parts. Data is the return value of an anonymous function, which forms a closure, so that each component does not have the same data when reusing components. Instead of using the EL attribute, we write the HTML structure using the template attribute. In the vue single file, the template is written directly.

In addition to the visible parts, we also need to note that child components can only be used by their parents, not across generations; A component can only use its own custom directives.

I recommend that you actually try it out, because the repetitive code demo is too redundant and I didn’t show it myself.

Global components

What if I want all components to use a component? Vue provides apis for creating global components. The Vue.component method registers and views global components.

        Vue.component("juejin", {data(){
                return {
                    text:'Global component'}},template:`<div>{{text}}</div>`
        })
Copy the code

The global component can register only one global component at a time, and its first parameter is the name of the component, that is, the name of the component label.

Check the component

Not commonly used, directly copied official display code:

// Get the registered component (always return constructor)
var MyComponent = Vue.component('my-component')
Copy the code

The creation of a component is usually called registration. Registered components can be used locally or globally. Component objects cannot be used as components even if they are written and not passed into Components or Vue.com Ponent.

Single file component

I think single-file component design is the ultimate embodiment of component functionality, if I mixed in this document is not reasonable, I hope to explain and use separately, the next article will explain in detail. Here is a.vue file to preview:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'.props: {
    msg: String}}</script>

<! -- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
Copy the code

Having talked about component creation and relationships, actually communication between components is another important topic that we’ll talk about later.