Vue全局組件和局部組件及組件傳值

全局組件註冊

就是說它們在註冊之後可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中。下面是使用在root根示例下的first-component全局組件:


使用Vue.component定義的全局組件裏面的data,和普通new Vue示例裏面的data有所不同,Vue.component定義的時候data必須是一個function,而new Vue實例裏邊data必須是一對象

關於Vue.component裏面組件命名以及標籤使用的時候的一些問題:
html標籤是不區分大小寫的,但是如果註冊組件的時候使用了駝峯命名或者帕斯卡命名,html標籤裏面必須以短橫線分隔命名,如果註冊組件的時候不是駝峯命名或者帕斯卡命名的話,html標籤是不區分大小寫的。如下:

局部組件註冊

局部組件註冊在vue實例中的components對象裏面,可以註冊多個局部組件,只有在實例中註冊了該組件的根元素才能夠使用這個組件,所有叫做局部組件。注意js中定義變量時不允許中線鏈接,所以這裏定義使用帕斯卡或者駝峯,則根元素中使用組件時需要使用中線連接


關於上面的name屬性傳參時,當設級到動態的值需要使用v-bind:進行綁定。通過props獲取值。Vue中的props自帶屬性類型檢測,如下:

Vue中is屬性渲染動態組件

下圖示例通過點擊國際新聞,國內新聞修改data中currentTab的值,然後html中使用is動態綁定值獲取組件。(is屬性還有一個作用就是,當組件嵌套不符合html規則的時候,通過將組件修改爲標籤,然後is屬性綁定組件即可)

Vue中組件間傳參問題

子組件像父組件傳參:

需要在子組件上通過$.emit這個對象註冊事件監聽(第一個參數是事件名,第二個參數是需要傳遞的值),之後再父組件中通過v-on:綁定事件,若觸發該事件則觸發一個父組件的方法

若父組件像子組件傳參:

則在父組件中以屬性的形式傳值,在子組件中以props獲取,子組件裏面可以通過插值表達式調用


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章