快捷導(dǎo)航

Vue中的局部組件介紹

更新時(shí)間：2022年01月24日 14:25:22 作者：huxiaoxiao.

這篇文章主要介紹了Vue中的局部組件，文章圍繞Vue局部組件得相關(guān)資料展開內(nèi)容，需要的的小孩伙伴請(qǐng)參考下面文章的具體介紹，希望對(duì)你有所幫助

在Vue中我們可以自己定義(注冊(cè))局部組件

定義組件名的方式：

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

然后在 components 選項(xiàng)中定義你想要使用的組件：

new Vue({
  el: '#app',
 
// 組件中心
  components: {
 // 在視圖層渲染 局部注冊(cè)組件時(shí)
  // component-a：你要在視圖層調(diào)用時(shí)使用的名稱
  // ComponentA：  局部注冊(cè)組件名稱
    '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)文章

vue中報(bào)錯(cuò)“error‘xxx‘?is?defined?but?never?used”問題及解決
介紹了兩種解決代碼導(dǎo)入問題的方法：?jiǎn)我淮a解決和全局解決,第一種方法是在代碼前面添加特定代碼并保存；第二種方法是在package.json中添加代碼后重啟項(xiàng)目,這些方法可以有效解決導(dǎo)包錯(cuò)誤提示,希望對(duì)大家有幫助
2024-10-10
vue3中effect函數(shù)到底是什么詳解
Effect幾乎是Vue3.0中最重要的一個(gè)功能了,計(jì)算屬性監(jiān)聽函數(shù)都是基于effect實(shí)現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3中effect函數(shù)到底是什么的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue中activated的用法
這篇文章主要介紹了vue中activated的用法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
vue的keep-alive用法技巧
在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實(shí)例代碼，需要的朋友們學(xué)習(xí)下。
2019-08-08
elementUI el-form 數(shù)據(jù)無法賦值且不報(bào)錯(cuò)解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無法賦值且不報(bào)錯(cuò)解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
vue-cli單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用配置詳解
本篇文章主要介紹了vue-cli單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用配置詳解，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07
Vuex報(bào)錯(cuò)之[vuex] unknown mutation type: han
這篇文章主要介紹了Vuex報(bào)錯(cuò)之[vuex] unknown mutation type: handlePower問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue 登錄滑動(dòng)驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 登錄滑動(dòng)驗(yàn)證實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-04-04
vue.js中修飾符.stop的用法解析
這篇文章主要介紹了vue.js中修飾符.stop的用法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03