成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue組件之全局組件與局部組件

qingshanli1988 / 1051人閱讀

摘要:組件是最強大的功能之一。全局組件注冊方式組件名方法我是全局組件渲染結(jié)果我是全局組件我是全局組件這里需要注意全局組件必須寫在實例創(chuàng)建之前,才在該根元素下面生效我是全局組件這樣只會渲染根元素下面的,并不會渲染根元素下面的,并且會報錯。

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能。在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。個人認為就是一個可以重復利用的結(jié)構(gòu)層代碼片段。

全局組件注冊方式:Vue.component(組件名,{方法})

eg:


渲染結(jié)果:

我是全局組件

我是全局組件

這里需要注意:

1.全局組件必須寫在Vue實例創(chuàng)建之前,才在該根元素下面生效;

eg:


這樣只會渲染app1根元素下面的,并不會渲染app根元素下面的,并且會報錯。

2.模板里面第一級只能有一個標簽,不能并行;


這樣子會報錯,并且只會渲染第一個標簽h1;我們應該這樣子寫:


局部組件注冊方式,直接在Vue實例里面注冊

eg:


局部組件需要注意:

1.屬性名為components,s千萬別忘了;

2.套路比較深,所以建議模板定義在一個全局變量里,代碼看起來容易一點,如下:(模板標簽比較多的時候,這樣子寫更加簡潔規(guī)整)


關于組件中的其他屬性,可以和實例中的一樣,但是data屬性必須是一個函數(shù):

eg:


顯示結(jié)果:

全局組件和局部組件一樣,data也必須是一個函數(shù):


顯示結(jié)果:

當使用 DOM 作為模板時 (例如,將 el 選項掛載到一個已存在的元素上),你會受到 HTML 的一些限制,因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模板內(nèi)容。尤其像這些元素

    ,
      ,,

            <