Vue中的局部組件介紹
更新時間：2022年01月24日 14:25:22 作者：huxiaoxiao.
這篇文章主要介紹了Vue中的局部組件，文章圍繞Vue局部組件得相關資料展開內(nèi)容，需要的的小孩伙伴請參考下面文章的具體介紹，希望對你有所幫助
在Vue中我們可以自己定義(注冊)局部組件
定義組件名的方式：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
然后在 components 選項中定義你想要使用的組件：
new Vue({
el: '#app',
// 組件中心
components: {
// 在視圖層渲染 局部注冊組件時
// component-a：你要在視圖層調(diào)用時使用的名稱
// ComponentA： 局部注冊組件名稱
'component-a': ComponentA,
'component-b': ComponentB
}
})
在視圖層調(diào)用局部組件：
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
舉個列子：
<body>
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
<script src="./js/vue.js"></script>
<script>
let componentA = {
template:`
<p>我是局部組件1</p>
`
}
let componentB = {
template:`
<p>我是局部組件2</p>
`
}
let vm = new Vue({
el:'#app',
data:{
},
components:{
"component-a":componentA,
"component-b":componentB
}
})
</script>
輸出結果為：
相關文章
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue3+Vite項目引入Bootstrap5、bootstrap-icons方式
這篇文章主要介紹了Vue3+Vite項目引入Bootstrap5、bootstrap-icons方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題
今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題，具有很好的價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Netlify 帶有內(nèi)置表單處理功能，可以用來存儲表單數(shù)據(jù)，下載 csv 文件，同時可以在接收到新的提交時發(fā)送郵件通知或者通過配置 webhook 發(fā)送請求。這篇文章主要介紹了在 Vue 應用中使用 Netlify 表單功能,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)用戶登錄及token驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了Vue.js第二天的學習筆記，關于vue-router的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue前端后端的交互方式?axios，axios?為第三方數(shù)據(jù)請求庫，下文具體的內(nèi)容介紹需要的小伙伴可以參考一下，希望對你的學習有所幫助2022-04-04
vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
當使用同一個對象產(chǎn)生沖突時，可以使用lodash包，對該對象進行深拷貝，從而使操作的對象為不同的對象,這篇文章主要給大家介紹了關于vue深拷貝的3種實現(xiàn)方式,需要的朋友可以參考下2023-02-02