vue 中幾種傳值方法

2021-09-29 13:18:02 字數 1999 閱讀 2289

vue專案中，元件跟元件之間資料的傳遞是很普遍的行為，在這裡總結幾種常見的vue元件跟元件之間傳值方式，其中，主要有父子元件，非父子元件傳值。

方法：父元件內設定要傳的資料，在父元件中引用的子元件上繫結乙個自定義屬性並把資料繫結在自定義屬性上，在子元件新增引數props接收即可。具體可參考官方文件。

父元件傳遞引數**如下：
上面**，通過在子元件上面繫結動態引數:form='userinfo'將父元件中的引數傳遞給子元件，子元件就可以通過props來進行接收。

子元件接收引數**如下：

...


export default }},


}// 另一種寫法


export default 


},}
上面**中，還可以使用陣列來接受引數，但是不能指定引數的型別。

方法：子元件通過vue例項方法$emit進行觸發並且可以攜帶引數，父元件監聽使用@（v-on）進行監聽，然後進行方法處理。

子元件向上傳值
上面**中，this指代的是vue例項，子元件通過$emit向父元件觸發事件和傳遞引數。

父元件監聽子元件傳來的值
上面**中，在子元件中監聽方法，如果子元件觸發方法，父子間這邊就可以得到子元件傳過來的引數了。

event bus匯流排方法：通過新建乙個vue例項，來實現$on接收和$emit來觸發事件

1、新建bus.js檔案：

// common/bus.js


import vue from 'vue';


// 使用 event bus


const bus = new vue();


export default bus;
2、元件1（接收通知資訊）

import bus from '@/common/bus.js'


export default


},created() )


}}
3、元件2（發布資訊）

import bus from '@/common/bus.js'


export default 


}}
借組vux外掛程式實現元件之間的傳值。

1、通過npm載入vuex，建立store.js檔案，然後在main.js中引入，store.js檔案**如下：

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex);


const state = ;


const mutations = 


} export default new vuex.store()
3、在元件中存vuex的值，一般如下：

state裡面的值只能通過action來提交來修改和賦值。
3、在元件中獲取vuex的值，一般如下：

}

vue 傳值的幾種方式

1.父子傳值 第一步 在父元素中繫結乙個引數 我這裡的是 id updateid 第二步 在子元素中接受，使用props接收。2.子向父傳值 第一步 在子元件中觸發 我這裡並沒有傳值，如果需要傳值，就 self.emit updates 你要傳的值 第二步 在父元素監聽事件 傳參的直接在update...

Vue幾種傳值方式的分析

在學習vue過程中自己總結了幾種元件間傳值的方式 步驟 定義路由時加上引數props true，在定義路由路徑時要留有引數佔位符 name 用法 to 路徑 value 在跳轉到的頁面加上引數props name 在跳轉到的頁面就獲取到了name 用法 js中直接this.name html中直接插...

vue元件傳值的幾種方式

vuex是一種轉為vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的多有元件的狀態，並以相應的規則保證狀態以一種可預期的方式發生變化。缺點 通過共享乙個vue例項，使用該例項的on和 on和on 和emit實現書資料傳遞。bus.js檔案 import vue from vue ex...