掌握vue核心概念之元件

//推薦駝峰命名 或者 使用 '-' 還是看個人看法習慣
const globalcomponent =),
template:
'這是乙個全域性元件'}
const localcomponent =),
template:
'這是乙個區域性元件'}
vue.
component
('globalcomponent'
, globalcomponent)
;//元件名，元件option物件
const vm =
newvue(,
el:,  components:
//區域性註冊})
// vm無需復用，所以data可以是直接的物件

const
index=(
)=>
import
('url'
);

//結合上一案例
const vm =
newvue(,
el:,//這裡其實也可以不掛載globalcomponent ，因為已經全域性註冊了
components:
//區域性註冊,
template:
`    
`,methods:
})

大家在平時可能都要這樣的需求，就是頁面首部header和尾部footer幾乎相同，可能也只是樣式有稍微的差距，用插槽可實現ui頁面級別的元件復用。

const head =
const vm =
newvue
(//區域性註冊，
template:
`    渲染父級的main的內容
`})

預設的插槽default，和使用插槽模板的非縮寫形式 v-slot:name

const layoutcomponent =
,  template:
`    這是main插槽的預設渲染內容，請注意main插槽裡和head和foot的內容區別
這裡是預設的插槽內容
這裡是預設的插槽內容`}
const vm =
newvue
(//區域性註冊，
template:
`    剩餘的這一段內容全部其實被模板的name為default的插槽接受
渲染父級的main的內容
剩餘的這一段內容全部其實被模板的name為default的插槽接受
`})

作用域插槽

插槽可以理解為在父級元件中渲染好的元素，最後放到模板檔案找個空位，渲染。

但是如果資料其實是在模板元件內部，而父級元件無法獲取，那麼這就無法實現復用。

有乙個解決方法就是作用域插槽。

//既然是作用域插槽，那麼在模板元件中插槽的宣告肯定不一樣
const layoutcomponent =,,
mainlist:
['zix'
,'wucan']}
),components:
,  template:
`    這是main插槽的預設渲染內容，請注意main插槽裡和head和foot的內容區別
`}const vm =
newvue
(//區域性註冊，
template:
`        物件接受模板裡繫結的資料屬性的集合，這裡用解構分離宣告變數 }
`})

動態插槽名v-slot:[name]

對js程式設計要求能力較強。渲染函式，它比模板更接近編譯器

建立乙個虛擬dom需要什麼呢？我們先自己分析下

class
="body"
>
>
header
>
>
footer
>
body
>

我們假設body是根節點，由於是樹形結構，遞迴，假設n-1層子vdom為children = […vnodes]，那麼n層如何表示，

n
=, attrs:
,    
otherneedattribute
},// attribute是可選的，即使傳入的是兩個引數，也會特殊處理為 childrenvdom 實參
childrenvdom:
[...
vnodes]}
n=}}

為什麼先講jsx，因為其開發效率要不乙個個節點通過api建立虛擬dom高不知道多少倍。

createelement
('anchored-heading',}
,[createelement
('span'
,'hello'),
' world!'
])

jsx需要babel外掛程式由於涉及內容其實較多(基本webpack搭建，各種配置)，挖個坑先在這，我們就來簡單一點的vue-cli-4.x寫

cli>3的都預設支援jsx語法的解析了

// jsx.vue檔案中可以這麼寫，rander優先順序大於template屬性值，小於template標籤
<
/template>
export
default
}<
/script>
<
/style>
//對於乙個vue檔案，注意它在被import時會經過vue-cli的打包解析成乙個物件，這一點可以從console.log(import ..)看出。有意思的是，在vue檔案上，最後形成的元件option物件在模板解析上有優先順序選取。1 => template標籤；2 => rander函式，3 => template物件屬性。

檔案 //由於單純的寫vue雖然可以通過編譯，但是寫jsx是沒有提示的，這就讓人難受了，不過有乙個方案就是直接寫jsx檔案 //注意，.vue檔案是經過解析最後變成了乙個元件option物件，並可以提供掛載，其實，被匯入父元件的模組就不定需要.vue檔案了，可以是乙個單純的完整的返回元件引數物件的js檔案，或者說jsx檔案 //jsx檔案，本質上是js檔案，只不過可以用jsx元素而已，最後被匯入的時候依然會進過編譯。其實只是單純的js檔案也可以這麼用，至於為什麼可能是做過一些處理，我不太清楚 export default , template: `jsx元件template `

}

沒有自身需要維持的資料的元件 => 這正是為什麼叫函式式元件

//1. 
<
/template>
//2. 
vue.
component
('functioncomponent'
,= context;
//context 其實就相當於react的props，表現的真正的元件像函式傳參一樣，我個人認識
//這種叫做透傳
return
createelement
('labelname'
, data, children)}}
)

vue掛載(mount)和繼承(extend)

vue之外掛程式和庫(含loading外掛程式實戰)

掌握vue核心概念之元件

Vue核心知識 Vue的元件之render函式

Vue 中元件概念

07丨Vue元件的核心概念 2 事件

掌握vue核心概念之元件

Vue核心知識 Vue的元件之render函式

Vue 中元件概念

07丨Vue元件的核心概念 2 事件

相關推薦