vue cli 元件之間的通訊

2022-09-05 10:18:12 字數 1379 閱讀 2405

不要在子元件中直接修改父元件的狀態資料

資料和處理資料的函式應該在同一模組內

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...