Vue中的局部組件介紹

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

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

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

定義組件名的方式：

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

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

然后在 components 選項中定義你想要使用的組件：

new Vue({
  el: '#app',
 
// 組件中心
  components: {
 // 在視圖層渲染 局部注冊組件時
  // component-a：你要在視圖層調用時使用的名稱
  // ComponentA：  局部注冊組件名稱
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

在視圖層調用局部組件：

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

輸出結果為：

您可能感興趣的文章:

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