How to introduce components in vue.js

How to introduce components in vue.js: 1. Create a folder for custom components; 2. Add the module to be introduced to the page to be added; 3. Introduce the module into index.vue; 4. , just introduce the component on the index.vue page.

The specific steps are as follows:

(Related video recommendations: jquery video tutorial)

1 , First create a folder specifically for placing custom components in your project (I placed it in common under components, this article uses table.vue as an example)

2. Then add the module to be introduced to the page you want to add, paying attention to the camel case naming method (for this article, for example: , because when I define the table module It is to define name: v-table, so when citing, you must also use the name defined in the table module);

3. Then in index.vue Introduce the table.vue module

//index.vue 页面 ，引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块；注意是驼峰命名法
</div>

4. Introduce this component on the index.vue page (note: table.vue, I added the module to the index.vue page, not the html tag , in fact, vue introduces new sub-components)

//index.vue
<script>
  import vTable from &#39;../../components/common/table&#39;  //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>

Tips: To put it bluntly, custom components are like encapsulation, extracting some public modules and then writing them into separate tool components or pages. When needed, custom components are like encapsulation. Just import it directly into the page.

In addition, in order to prevent writing too much code on the same page and inconvenience later maintenance, the entire page can be divided into multiple small modules, and then the modules can be introduced on the main page, and the creation includes the introduction The steps are all the same.

For example:

Related recommendations: vue.js tutorial

The above is the detailed content of How to introduce components in vue.js. For more information, please follow other related articles on the PHP Chinese website!