vue.js實例對象+組件樹的詳細介紹
vue的實例對象
首先用js的new關(guān)鍵字實例化一個vue
el: vue組件或?qū)ο笱b載在頁面的位置，可通過id或class或標簽名
template: 裝載的內(nèi)容。HTML代碼/包含指令或者其他組件的HTML片段，template將是我們使用的模板
**data:** 數(shù)據(jù)通過data引入到組件中
在組件中的data要以函數(shù)的形式返回數(shù)據(jù)，當不同的界面用了同一個組件時，才不會以為一個組件的值發(fā)生改變而改變其他頁面的內(nèi)容。
{{ }} 雙括號語法里面放入數(shù)據(jù)的變量
組件注冊語法糖
全局組件
A方法：
調(diào)用Vue.extend()方法創(chuàng)建組件構(gòu)造器
調(diào)用Vue.component(組件標簽,組件構(gòu)造器)方法注冊組件
在Vue實例的作用范圍內(nèi)才能夠使用組件
/*A方法全局組件1:*/
//1.Vue.extend() 創(chuàng)建組件構(gòu)造器
var mycomponent = Vue.extend({
/*組件內(nèi)容*/
template:…… ,
data: ……
})
//2.Vue.component注冊組件
Vue.component('my-component1', mycomponent);
B方法（與A方法一樣，只是交簡單的寫法）：
沒有A方法中的第1步，直接調(diào)用Vue.component(標簽名，選項對象)方法
/*B方法 全局組件2:*/
Vue.component('my-component2', {
/*組件內(nèi)容*/
template:…… ,
data: ……
}
/*在html中的組件調(diào)用，把組件標簽直接用在html中相應的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
局部組件 使用components屬性
```javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部組件1 /
'part-component1': partcomponent1
}，
/B方法 局部組件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
```
子組件
創(chuàng)建方法和上面兩種方法類似，不同的是位置是放在組件內(nèi)部。
var compentChild ={
el:……,
data:……
}
component: {
el: ……,
data: {……}
components: {
'component-child': componentChild
}
}
內(nèi)置組件
不需要在components里面聲明組件。而是直接用標簽。例如在如下的myHeader中使用內(nèi)置組件,root-view、keep-alived等也是vue本身提供的一個內(nèi)置組件。
var myHeader = {
template: '<component></component> <root-view></rooot-view>'
}
總結(jié)
以上所述是小編給大家介紹的vue.js實例對象+組件樹的詳細介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
創(chuàng)建vue項目沒有router、view的解決辦法
在學習vue的時候遇到很多問題,這里做一些總結(jié),下面這篇文章主要給大家介紹了關(guān)于創(chuàng)建vue項目沒有router、view文件夾的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實例化時發(fā)生的，在組件中，可以通過data選項來定義組件的初始數(shù)據(jù)，需要詳細了解可以參考下文2023-05-05
Vue基于vuex、axios攔截器實現(xiàn)loading效果及axios的安裝配置
這篇文章主要介紹了Vue基于vuex、axios攔截器實現(xiàn)loading效果及axios的安裝配置,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue 微信授權(quán)解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue跳轉(zhuǎn)頁面打開新窗口,并攜帶與接收參數(shù)方式
這篇文章主要介紹了vue跳轉(zhuǎn)頁面打開新窗口，并攜帶與接收參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在后端管理項目中使用vue來進行前端項目的開發(fā)，但我們都知道Vue實際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。也無法獲得JQuery這樣的js框架對元素值的修改的。而日期控件daterangepicker又基于JQuery來實現(xiàn)的2022-11-11
這篇文章主要介紹了vscode 開發(fā)Vue項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
關(guān)于VUE點擊父組件按鈕跳轉(zhuǎn)到子組件的問題及解決方案
本文主要介紹了在Vue框架中,如何通過父組件的點擊事件打開子組件中的彈窗并展示表格內(nèi)容,主要步驟包括在父組件中定義數(shù)據(jù)屬性,創(chuàng)建并定義子組件的彈窗和表格內(nèi)容,通過props屬性和自定義事件實現(xiàn)父子組件間的數(shù)據(jù)傳遞和方法調(diào)用2024-10-10
一般我們的vue項目都是單頁面的,其實因為vue在工程化開發(fā)的時候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個單頁面,下面這篇文章主要給大家介紹了關(guān)于vue多頁面項目開發(fā)的相關(guān)資料,需要的朋友可以參考下2022-01-01