vue父子組件傳值,以及父子之間方法的調用

1,子組件向組父組件傳值

//1子組件使用emit向父組件傳值
this.$emit('fFunction',data);
//2,父組件引入子組件的
//3,父組件 在子組件上綁定點擊事件
@fFunction = "fFunction"
//4,父組件在方法中取到子組件的值
fFunction(data){
    console.log(ddata);
}

2,父組件向子組件傳值 

//1,引入子組件
//在子組件上使用:data="data"的方式在子組件上傳值
//2,子組件使用props接收父組件的值
props:{
    data: {
      type: Number,
      default: 101
    }
}    

 3,子組件調用父組件的方法

//1,子組件使用this.$emit('',data)的方式調用父級方法
//2,在子組件中使用this.$parent.父級方法   進行調用

4,父組件調用子組件的方法

//1,父組件引入子組件,在子組件上定義ref屬性,ref="children"
//2,父組件在方法中使用this.$refs.children.子組件的方法
//父組件引入子組件,子組件中定義ref屬性,ref="children"
//父組件中使用this.$refs.children.$emit('')

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章