vue父子組件的數據傳遞示例
更新時間：2017年03月07日 17:20:27 作者：luckylqh
這篇文章主要介紹了vue父子組件的數據傳遞示例,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1.父組件向子組件傳遞數據
<div id="box"> <aaa></aaa> </div>
<template id="aaa">
<h1>模板aaa=>{{msg1}}</h1> //msg1寫在這里是可以的，因為這是父組件內部
//<bbb>{{msg1}}</bbb> //這種寫法是不可以的，這是在子組件內部，要在這里顯示父組件的數
//據，需要用props定義屬性
<bbb :m='msg1'></bbb>
</template>
var vm=new Vue({
el:"#box",
data () {
a:'aaa'
},
components:{
'aaa':{
data () {
msg1:'父組件的數據'
},
template:'#aaa',
components:{
'bbb':{
// props:['m'], //這是一種寫法，props以數組的形式定義屬性
props：{
'm':String //這是第二種寫法，對象的形式
},
template:'<h3>這是子組件bbb--{{m}}</h3>'
}
}
},
}
})
從這個例子中可以看出，父組件向子組件傳遞數據，因為每一個組件都是獨立的作用域，所以要把父組件的數據在子組件中顯示，要使用props定義屬性來綁定父組件里面的數據才可以，如這里父組件的數據是msg1，用props定義一個屬性m，來接收數據msg1；在子組件的模板里面用{{m}}的形式顯示父組件的數據
父組件不僅可以向子組件傳遞數據，也可以傳遞方法，如：
<edit-issue :title='issueTitle' :is-show.sync='modelIssue' :model-type.sync='modeltype' :issue-datas='listdb' :user.sync='users' :projects="projectDatas" :get-datas="getCreateIssues" :localtoken="localtokenId" :user- name="userName" :token-data="tokendata"> </edit-issue>
這是一個子組件，引用在父組件中，其中的 :get-datas=”getCreateIssues” 接收的是一個方法，這個方法在父組件中從后臺獲取數據傳遞給子組件，在子組件中就可以展示這些數據，
methods:{
getCreateIssues(){ //這是es6的格式
this.$http.get(url,data).then(res=>{}) //這也是es6的格式
}
}
在子組件中
復制代碼 代碼如下:
props:['executorsData','isShow','modelType','issueDatas','user','projects','title','getDatas','getEditData','localtoken',"userName","tokenData"],
getDatas就是從父組件中接收數據的方法，對應上面的 :get-datas=”getCreateIssues”，在子組件可以直接使用getDatas這個方法，如：
methods:{
okConfirm(){
issueApi.delIssue(this.delId).then(res=>{
if(res.data.code==0){
this.successPop('刪除成功');
this.openConfirm=false;
this.isShow=false;
//這里就是使用的父組件的方法
this.getDatas();
//end
this.$dispatch('fetchList');
}else{
this.warningPop(res.data.message)
}
})
},
}
2.子組件向父組件傳遞數據
在子組件中選擇條件后，在父組件中執(zhí)行搜索功能
<div class="task-btn"> <p @click="clear()">清空</p> <p @click="confirm(modalData)">搜索</p> //modalData是需要向后臺發(fā)送的數據 </div>
export default{
props:['confirm']，
data(){
return {
modalData：{ProjVerName:''}
}
}
}
定義一個confirm方法接收父組件中的方法，這里從子組件向父組件傳遞數據不是按照教程上的方法使用$emit,而是直接把數據作為參數傳遞到方法中，在父組件中這樣使用：
<issuesearch :confirm="search" :showtotal.sync="showtotal" :is-re-get.sync="isReGet" :type="chosenType"> </issuesearc>
data(){
return {
searchData:{
ProjVerName:'',
}
}
},
methods:{
search(data){ //data就是接收子組件傳遞過來的數據的形參
this.searchData.ProjVerName=data.ProjVerName；
this.$http.get(url,this.searchData.ProjVerName).then(res=>{
console.log(res)
})
}
}
這種方法就是從子組件向父組件傳遞數據，
從子組件向父組件傳遞方法，需要使用$dispatch,如：
在子組件中點擊保存以后，這個彈出框消失，父組件中需要獲取一遍最新數據，這種情況就需要把這個保存事件發(fā)送出去，讓父組件知道，用法：
復制代碼 代碼如下:
<div class="creator-btn fr margintop" @click="save()" v-if="(modelType=='edit')&&(issueDatas.state!==5)">保存</div>
methods:{
save (){
this.$http.post(url,data).then(res=>{
console.log('保存成功');
this.$route.router.go({
name:'issues.issueList'
}); //保存完以后跳轉到對應的路由
this.$dispatch('disSave') //這里把保存事件發(fā)送出去
})
}
}
在父組件中使用events來接收這個事件，并執(zhí)行一些動作，如：
events:{
disSave(){ //這就是接收的子組件的方法
this.getCreateIssues(); //接收完以后調用一個方法獲取一遍數據，這樣就實現了在子組件中點擊保存后，父組件能直接獲取到最新的數據
}
},
關于子組件向父組件傳遞數據也可以使用教程里的方法，使用$emit
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue測試環(huán)境打包與生產環(huán)境打包文件數量不一致解決方案
這篇文章主要為大家介紹了vue測試環(huán)境打包與生產環(huán)境打包文件數量不一致的解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了vux-scroller實現移動端上拉加載功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vue 引入AMap高德地圖的實現代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
更好的了解項目的目錄結構,能更好的去開發(fā)項目,下面這篇文章主要給大家介紹了關于vue3項目目錄結構的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了利用Vue-Router實現頁面正在加載特效方法示例，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要介紹了vue日期選擇框之時間范圍的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue2 el-table行懸停時彈出提示信息el-popover的實現
本文主要介紹了vue2 el-table行懸停時彈出提示信息el-popover的實現,用到了cell-mouse-enter、cell-mouse-leave兩個事件,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家介紹了Vue qiankun微前端實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue data的數據響應式到底是如何實現的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點遠,需要我們做調整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06