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