Vue 元件傳值

2021-09-25 03:20:05 字數 1144 閱讀 3443

一、父子元件傳值

在引用元件中被引用元件為子元件

1.父元件給子元件傳值、傳遞方法、傳遞類

在父元件中引用header子元件  

:homemsg="msg"  //把父元件中的msg傳給子元件     在子元件中用props["homemsg"]接收,然後就可以用}給介面賦值

:run='run'  run是乙個方法,也可以把方法傳給子元件    在子元件中用props["homemsg","run"]接收,然後就可以呼叫方法,亦可以在呼叫方法是傳值給父元件的方法

:home='this'  把整個類傳過去,this代表當前元件  在子元件中可以用props["homemsg","run","home"]接受,然後可以通過this.home.run()  //值或者方法

props可以用來獲取也可以用來判斷值的合法性  props  // 如果不是homemsg不是字串型別也可以用,但是會列印提示報錯

2.父元件主動獲取子元件資料或方法、子元件獲取父元件的資料或方法

呼叫子元件是定義乙個ref  在父元件中通過 this.$refs.header.run() //方法或者資料

子元件呼叫父元件的資料和方法用 this.$parent.msg //方法或者資料  

二、非父子組建的傳值

1.首先新建乙個空的vue例項  vueevent.js 裡的**

import vue from 'vue';

var vueevent = new vue();

export default vueevent;

2.在需要通訊的兩個元件中引入vue例項

import vueevent from "../model/vueevent.js";

3.廣播和接收廣播

廣播:vueevent.$emit('toxinwen',this.msg)

接收廣播:vueevent.$on('toxinwen',function(data));

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

Vue元件傳值

學習vue的傳值心得,剛入門vue,大佬勿噴,請多多指教。1.父元件傳值子元件 父元件巢狀子元件式,在標籤裡繫結 子元件用props屬性接收 例 父元件傳值,為縮寫,等同於v bind obj item props obj count 子元件接收傳值,可直接使用,但是推薦在下方重新賦值給新變數再使用...