不要在子元件中直接修改父元件的狀態資料
資料和處理資料的函式應該在同一模組內
props
自定義事件
slot插槽
訊息訂閱與發布
vuex
在元件內宣告所有的 props 只指定名稱 props: ['name', 'age', 'logdog']
指定名稱和型別
props:
指定名稱/型別/必要性/預設值
props: ,
}傳乙個物件
傳入方法
方法傳參
父元件接收引數
其他屬性
使用注意:
此方式用於父元件向子元件傳遞資料
所有標籤屬性都會成為元件物件的屬性, 模板頁面可以直接引用
存在缺陷
如果需要向非子後代傳遞資料必須多層逐層傳遞
兄弟元件間也不能直接 props 通訊, 必須借助父元件才可以
注意事項:
此方式只用於子元件向父元件傳送訊息(資料)
隔代元件或兄弟元件間通訊此種方式不合適
案例:子元件刪除父元件的內容
傳遞資料
父元件接受引數
在要插入的位置寫上< slot >標籤
引入元件
slot的值和標籤的值對應上
效果
元件之間通訊
一 父元件向子元件傳遞資料 在 vue 中,可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分,logo 是在 data 中定義的變數。如果需要從父元件獲取 logo 的值,就需要使用props logo 在 props 中新增了元素之後,就不需要在 ...
父子元件之間的通訊
父向子元件傳參 父元件直接定義屬性 msg 和屬性值 something interesting 子元件想要取得父元件中定義的屬性值 something interesting 在子元件中定義props,屬性名 msg 在陣列中 子元件即可得到該引數 this.msg 子向父元件傳參 在compon...
vue元件之間的通訊
區域性元件 區域性元件必須手動掛載,不然無法生效。全劇元件 全域性元件不需要手動掛載,但不常用,盡量不要在全域性上掛載變數或者元件 影響瀏覽器效能 配合模板實現元件之間的巢狀。元件是vue.js最強大的功能之一,核心目標是擴充套件htnl元素,封裝可重用 元件可按照template,style,sc...