操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

Vue組件之間傳值/調用幾種方式

更新時間：2022年12月02日 14:28:58 作者：來干了這碗代碼

這篇文章主要介紹了Vue組件之間傳值/調用的幾種方式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值不同js文件之間傳值，需要的朋友可以參考下

目錄

組件之間傳值/調用方法的幾種方式(一)父組件向子組件傳值==props

1.在父組件中使用子組件的地方綁定數據

2.子組件使用props接收父組件傳過來的數據

props:{
     message:String
}

3.示例：

(二)子組件向父組件傳值==$emit不同js文件之間傳值，也可以用來調用父組件中的方法

1.子組件直接使用$emit將內部數據傳遞給父組件

this.$emit("childByValue",this.childValue);

2.父組件中接收數據

methods:{
     childByValue:function(childValue){

          this.name=childValue;
     }
}

(三)可以通過 p a r e n t 和 和 和獲取父子組件參數

$children[i].params
this.$parent.params

(四)兄弟之間傳值===Vuex

1.在state里定義數據和屬性

state: {

    userName: '',
  },

2.在里定義函數

mutations: {
    setUserName(state, name) {
      state.userName = name
    },
},

3.設置值

this.$store.comit('setUserName',params)

4.獲取值

this.$store.state.user.userName

(五)父組件調用子組件的方法===ref

1.子組件的方法

methods:{
     childMethod(){
          alert("我是子組件的方法");
     }
}

2.父組件調用子組件的方法

methods:{
     parentMethod(){
          this.$refs.child.childMethod();
     }
} 

推薦

vue 組件間的通信之子組件向父組件傳值的方式

詳解Vue3父組件調用子組件方法($refs在setup()、＜＞中使用)

到此這篇關于Vue組件之間傳值/調用方法的幾種方式的文章就介紹到這了,更多相關vue組件傳值內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！