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的格式 }}在子組件中
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.子組件向父組件傳遞數據
在子組件中選擇條件后，在父組件中執行搜索功能
<div class="task-btn"> <p @click="clear()">清空</p> <p @click="confirm(modalData)">搜索</p> //modalData是需要向后臺發送的數據</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,如：
在子組件中點擊保存以后，這個彈出框消失，父組件中需要獲取一遍最新數據，這種情況就需要把這個保存事件發送出去，讓父組件知道，用法：
methods:{ save (){ this.$http.post(url,data).then(res=>{ console.log('保存成功'); this.$route.router.go({ name:'issues.issueList' }); //保存完以后跳轉到對應的路由 this.$dispatch('disSave') //這里把保存事件發送出去 }) }}在父組件中使用events來接收這個事件，并執行一些動作，如：
events:{ disSave(){ //這就是接收的子組件的方法 this.getCreateIssues(); //接收完以后調用一個方法獲取一遍數據，這樣就實現了在子組件中點擊保存后，父組件能直接獲取到最新的數據 }},關于子組件向父組件傳遞數據也可以使用教程里的方法，使用$emit
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
