在Vue中如何建立元件
Vue 建立元件的方法有哪些呢？下面我就為大家分享一篇Vue 創建組件的兩種方法小結，具有很好的參考價值，希望對大家有幫助。
建立元件的兩個方法小結
#1.全域註冊
2.局部註冊
var child=Vue.extend({})
var parent=Vue.extend({})#Vue.extend() 全域方法產生建構器，建立子類別
使用基礎Vue 建構器，建立一個「子類別」。
這樣寫非常繁瑣。於是vue進行了簡化
使用Vue.component()直接建立和註冊元件：
Vue.component(id,options) 全域方法用來註冊全域元件
id 是string類型，也就是註冊元件的名稱
options 是個物件
// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
template: '<p>This is the first component!</p>'
})
var vm1 = new Vue({
el: '#app1'
})Vue.component()的第1個參數是標籤名稱，第2個參數是一個選項對象，使用選項對象的template屬性定義組件模板。
使用這種方式，Vue在背後會自動地呼叫Vue.extend()。
在選項物件的components屬性中實作局部註冊：
#var vm2 = new Vue({
el: '#app2',
components: {
// 局部注册，my-component2是标签名称
'my-component2': {
template: '<p>This is the second component!</p>'
},
// 局部注册，my-component3是标签名称
'my-component3': {
template: '<p>This is the third component!</p>'
}
}
})==局部註冊都放在選項物件中建立==
注意：這裡是components，裡面可以定義多個元件。
簡化後是這樣的寫法
#<body>
<p id='box'>
<parent>
</parent>
</p>
<script src='js/vue.js'></script>
<script>
Vue.component('parent',{
template:`<p><h1>我是父组件</h1><child></child></p>`,
components:{
'child':{
template:`<h1>我是子组件</h1>`
}
}
})
new Vue({
el:'#box'
})
</script>
</body>註冊一個parent的父組件。然後在父元件的選項物件中註冊一個child的子元件。將子組件child的標籤寫到父組件parent的template裡面。
頁面上的樣式結構就是
<p> <h1>我是父组件</h1> <h1>我是子组件</h1> </p>
注意：用局部註冊的子元件不能單獨直接使用！
標籤掛在p裡，會報錯
#<p id='box'> <child></child> </p>
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
在angular中基於ng-alain如何定義自己的select元件？
以上是在Vue中如何建立元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何安裝Win10舊版元件DirectPlay
Dec 28, 2023 pm 03:43 PM
不少用戶在玩win10的的一些遊戲的時候總是會遇到一些問題，比如說卡屏和花屏等等情況，這個時候我們是可以採用打開directplay這個功能來解決的，而且功能的操作方法也很簡單。 win10舊版元件directplay怎麼安裝1、在搜尋框裡面輸入「控制台」然後開啟2、檢視方式選擇大圖示3、找到「程式與功能」4、點選左側的啟用或關閉win功能5、選擇舊版這裡的勾選上就可以了
如何在真我手機上建立資料夾？
Mar 23, 2024 pm 02:30 PM
標題：真我手機新手指南：如何在真我手機上建立資料夾？在現今社會，手機已成為人們生活中不可或缺的工具。而真我手機作為一款備受歡迎的智慧型手機品牌，其簡潔、實用的作業系統備受用戶喜愛。在使用真實我手機的過程中，很多人可能會遇到需要整理手機中的檔案和應用程式的情況，而建立資料夾就是一種有效的方式。本文將介紹如何在真我手機上建立資料夾，幫助使用者更好地管理自己的手機內容。第
格力+如何創造家庭
Mar 01, 2024 pm 12:40 PM
很多朋友表示想知道在格力+軟體裡該怎麼去創建家庭，下面為大家帶來了操作方法，想要了解的朋友和我一起來看看吧。首先，開啟手機上的格力+軟體，並登入。接著，在頁面底部的選項列中，點選最右邊的「我的」選項，即可進入個人帳戶頁面。 2.來到我的頁面後，在“家庭”下方的選項裡有一個“創建家庭”，找到後在它的上面點擊進入。 3.接下來跳到建立家庭的頁面裡，根據提示在輸入框裡輸入要設定的家庭名稱，輸入好後在右上角點選「儲存」按鈕。 4.最後在頁面下方會彈出一個「儲存成功」的提示，代表家庭已經成功創建好了。
如何在GIMP中創造像素藝術
Feb 19, 2024 pm 03:24 PM
本文將引起您的興趣，如果您有意在Windows上使用GIMP進行像素藝術創作。 GIMP是一款著名的圖形編輯軟體，不僅免費開源，還能幫助使用者輕鬆創造美麗的圖像和設計。除了適用於初學者和專業設計師外，GIMP也可以用於製作像素藝術，這種數位藝術形式是利用像素作為唯一構建塊來進行繪製和創作的。如何在GIMP中建立像素藝術以下是在WindowsPC上使用GIMP建立像素圖片的主要步驟：下載並安裝GIMP，然後啟動應用程式。創造一個新的形象。調整寬度和高度的大小。選擇鉛筆工具。將筆刷類型設定為像素。設定
如何創建您的 iPhone 聯絡人海報
Mar 02, 2024 am 11:30 AM
在iOS17中，Apple為其常用的「電話」和「通訊錄」應用程式新增了聯絡人海報功能。這項功能允許用戶為每個聯絡人設置個人化的海報，使通訊錄更具視覺化和個人化。聯絡人海報可以幫助用戶更快速地識別和定位特定聯絡人，提高了用戶體驗。透過這項功能，使用者可以根據自己的喜好和需求，為每個聯絡人添加特定的圖片或標識，使通訊錄介面更加生動iOS17中的Apple為iPhone用戶提供了一種新穎的方式來表達自己，並添加了可個性化的聯繫海報。聯絡人海報功能可讓您在呼叫其他iPhone用戶時展示獨特的個人化內容。您
如何使用Highcharts建立甘特圖表
Dec 17, 2023 pm 07:23 PM
如何使用Highcharts建立甘特圖表，需要具體程式碼範例引言：甘特圖是一種常用於展示專案進度和時間管理的圖表形式，能夠直觀地展示任務的開始時間、結束時間和進度。 Highcharts是一款功能強大的JavaScript圖表庫，提供了豐富的圖表類型和靈活的配置選項。本文將介紹如何使用Highcharts建立甘特圖表，並給出具體的程式碼範例。一、Highchart
Django初探：用命令列創建你的首個Django項目
Feb 19, 2024 am 09:56 AM
Django專案開啟之旅：從命令列開始，創建你的第一個Django專案Django是一個強大且靈活的網路應用框架，它以Python為基礎，提供了許多開發Web應用所需的工具和功能。本文將帶領你從命令列開始，創建你的第一個Django專案。在開始之前，請確保你已經安裝了Python和Django。步驟一：建立專案目錄首先，開啟命令列窗口，並建立新的目錄
如何開啟win10舊版組件的設置
Dec 22, 2023 am 08:45 AM
win10舊版元件是需要使用者自己去設定裡面打開的，因為很多的元件平時都是預設關閉的狀態，首先我們需要進入到設定裡面，操作很簡單，跟著下面的步驟來就可以了win10舊版元件在哪裡開啟1、點選開始，然後點選「win系統」2、點選進入控制台3、再點選下面的程式4、點選「啟用或關閉win功能」5、在這裡就可以選擇你要的開啟了
