Vue.js中元件的建立與註冊方法的介紹

這篇文章帶給大家的內容是關於Vue.js中元件的創建與註冊方法的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

使用之前要建立

在components 檔案下建立一個自己的元件檔案（.vue）

初始結構為

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

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

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

</style>

加入自己的程式碼設定就完成了一個簡單的子元件檔案建立

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

子元件建立好後就要註冊它，只有註冊了才能使用

#註冊分為 

                1.局部註冊元件：在App.vue檔案中註冊   也以App.vue檔案使用
            2.全域註冊元件：在main.js文件中註冊

全域註冊元件後，在App.vue檔案使用

 相關推薦：

 使用 Vue.js 建立的 Calendar_html/css_WEB-ITnose

 什麼是Vue.js元件？ Vue.js元件用法總結

以上是Vue.js中元件的建立與註冊方法的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！