詳解vue 資料傳遞的方法

2022-09-29 12:18:12 字數 709 閱讀 4597

元件(component)是 vue.js 最強大的功能。元件可以封裝可重用的**,通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。

1.父元件向子元件傳值

元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。

子元件:

子元件需要從父元件獲取 logo 的值,就需要使用 props: [『logo']

父元件:

2.子元件向父元件傳值

子元件主要通過事nhwnreskd件傳遞資料給父元件。

子元件:

其中 transferuser 是乙個自定義的事件,this.username 將通過這個事件傳遞給父元件 。

父元件:

getuser 方法中的引數 msg 就是從子元件傳遞過來的引數 username

3.路由傳值

使用時,程式設計客棧在生命週期created賦值。

4.通過localstorage或者sessionstorage來儲存資料

5.vuex

在應用複雜時,推薦使用vue官網推薦的vuex。

https://vuex程式設計客棧.vuejs.org/zh-cn/getting-started.html

本文標題: 詳解vue 資料傳遞的方法

本文位址: /ruanjian/j**a/225672.html

vue 傳遞多行資料 vue 資料傳遞的方法

元件 component 是 vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。1.父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的...

vue 資料傳遞

1.父子元件件資料傳遞 props 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 props 選項。子元件要顯式地用props選項宣告它期待獲得的資料 vue.component child 然後我們可以這樣...

vue再次入手(資料傳遞 )

5.最後一種,互通 無所謂父元件或者是子元件,而是隨時隨地都能呼叫到資料的一種方法。便是利用vuex來管理資料,官網描述 vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可 的方式發生變化。可以理解為vuex為全域...