Introduction to the creation and registration methods of components in Vue.js

This article brings you an introduction to the creation and registration methods of components in Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Create before using

Create your own component file (.vue) under the components file

The initial structure is

<!--html区域-->
<template>
    
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw"
    }
</script>

<!--css区域-->
<style scoped>

</style>

Add your own code settings to complete the creation of a simple sub-component file

<!--html区域-->
<template>
    <p class="hw">
      {{ name }}
    </p>
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw",
      data(){
          return {
            name:"毛没齐"
        }
      }
    }
</script>

<!--css区域-->
<style scoped>
.hw{
  color: blue;
}
</style>

After the sub-component is created, you must register it. Only after registration can you use

Registration points For

1. Local registration component: Register in the App.Vue file and also use

2. Global Registration Component: In Main.js file After registering the component globally in

, use

in the App.vue file. Related recommendations:

Calendar_html/css_WEB-ITnose created using Vue.js

What is a Vue.js component? Summary of Vue.js component usage

The above is the detailed content of Introduction to the creation and registration methods of components in Vue.js. For more information, please follow other related articles on the PHP Chinese website!