一. 父?jìng)髯?/h4>

1. 父組件先在data中定義要傳給子組件的屬性名
2. 父組件在中引入子組件
3. 在components中注冊(cè)
4. 使用步驟 3 中注冊(cè)好的子組件
5. 在 3 中，父?jìng)髯?br> （1）利用 : 將父組件的對(duì)象、數(shù)組、字符串等傳給子組件，供子組件使用
   （2）利用 @ 將父組件的方法傳給子組件，供子組件調(diào)用

 :子組件接收父組件時(shí)用的屬性名 =  父組件要傳給子組件的屬性名
 @子組件接接收父組件使用的方法 = 父組件要傳給子組件使用的方法

二. 子用父

1. 接受通過(guò):傳的值，通過(guò) props
   若為字符串和數(shù)組，如下

 props:{
 	子組件接收父組件時(shí)用的屬性名:{
 		type:String,
 		default:''
 	}
 }
 
或直接 props:{'子組件接收父組件時(shí)用的屬性名'}

 props:{
 	子組件接收父組件時(shí)用的屬性名:{
 		type:Array,
 		default:()=>{}
 	}
 }
 
或直接 props:{'子組件接收父組件時(shí)用的屬性名'}

這里切記：通過(guò)props接受到的值是不能改變的，如果要改變只能重新再子組件定義，然后通過(guò)watch將父組件的值傳給該定義好的屬性，即可渲染

 watch:{
	子組件接收父組件時(shí)用的屬性名(){
		this.子組件定義的屬性名 = this.子組件接收父組件時(shí)用的屬性名
    }
 }

2. 接受通過(guò)@傳的方法，通過(guò)this.$emit("父組件要傳給子組件使用的方法
   ",參數(shù))

  子組件調(diào)用接口后，需刷新頁(yè)面。參數(shù)可傳可不傳
  this.$emit("父組件要傳給子組件使用的方法",參數(shù))

三. 舉例

1. 父?jìng)髯幽K

<template>
	<div>
		<h1>我是父輩的組件</h2>
		<el-table :data="grandpaList" border>
			<el-table-column fixed  prop="date" label="日期"  width="150" />
			<el-table-column fixed  prop="name" label="姓名"  width="150" />
			<el-table-column fixed  prop="address" label="籍貫"  width="150" />
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="handleViewDetail">詳情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 4. 使用注冊(cè)的子組件 并執(zhí)行步驟5. 父?jìng)鲄⒔o子-->
		<ChildDetail ref="fatherDetail" :show.sync="viewFatherDialog" @fetchData="fetchData">
	</div>
</template>
<script>
// 2. 引入子組件
import ChildDetail from "./components/ChildDetail.vue"
import {getList} from "@/api/具體的接口路徑"
	export default{
		// 3. 注冊(cè)子組件
		components:{ChildDetail},
		data(){
			return{
				grandpaList:[],
				viewFatherDialog:false,  // 1. 定義屬性名
			}
		},
		mounted(){
			this.fetchData()
		},
		methods:{
			fetchData(){
				getList(傳的參數(shù)).then(res=>{
					this.grandpaList = res.data
				})
			}
		}
	}
</script>

2. 子用父模塊

<template>
	<div>
		<el-dailog  title="我是子輩的組件"  :visible.sync="dialogVisible">
 			<span>這是一段信息</span>
  			<span slot="footer" class="dialog-footer">
  			    <el-button @click="close">取 消</el-button>
    			<el-button type="primary" @click="handleSubmit">確 定</el-button>
  </span>
		</el-dailog>
	</div>
</template>
<script>
	export default{
	// 1. 接受通過(guò)` : `傳的值，通過(guò) `props`
		props:{show},
		data(){
			return{
				dialogVisible:false,
			}
		},
		// props接受到的值要改變,只能用watch
		watch:{
			show(){
				this.dialogVisible = this.show
			}
		},
		methods:{
			close(){
			},
			handleSubmit(){
				submit(傳的參數(shù)).then(res=>{
				// 3. 提交（新增/編輯/刪除）后一般需刷新頁(yè)面
					this.$emit("fetchData")
				})
			}
		}
	}
</script>

四. 爺孫調(diào)用

1. 先使用 provide拋出去
   
2. 孫子使用 inject接收
   
3. 接收后可在孫子輩的組件直接 this.爺爺輩的方法()即可

若inject:[‘方法名報(bào)錯(cuò)’]，則可更改為文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-475442.html

inject:{
  getList:{value:"getList",default:null}
}

五. 參考附錄

1. 爺孫：如何傳參
2. inject[‘方法名報(bào)錯(cuò)’]：如何解決

到了這里，關(guān)于【Vue】父子組件傳參 && 孫子調(diào)用爺爺?shù)姆椒?provide inject的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！