[Vue] Parent-child component pass parameter && grandson calls grandpa's method provide inject

1. From father to son

1. The parent component first defines the attribute name to be passed to the child component in data
2. The parent component introduces the child component in
3. Register in components
4. Use the subcomponents registered in step 3
5. In 3, parent to child
   (1) use to :pass the object, array, string, etc. of the parent component to the child component for use by the child component
   (2) use to @pass the method of the parent component to the child component for the child component to call

 :子组件接收父组件时用的属性名 =  父组件要传给子组件的属性名
 @子组件接接收父组件使用的方法 = 父组件要传给子组件使用的方法

2. The son uses the father

1. Accept :the value passed by, props
   if it is a string or an array, as follows

 props:{
    
    
 	子组件接收父组件时用的属性名:{
    
    
 		type:String,
 		default:''
 	}
 }
 
或直接 props:{
    
    '子组件接收父组件时用的属性名'}

 props:{
    
    
 	子组件接收父组件时用的属性名:{
    
    
 		type:Array,
 		default:()=>{
    
    }
 	}
 }
 
或直接 props:{
    
    '子组件接收父组件时用的属性名'}

Remember here: the value received through props cannot be changed. If you want to change it, you can only re-define the sub-component, and then pass the value of the parent component to the defined property through watch to render

 watch:{
    
    
	子组件接收父组件时用的属性名(){
    
    
		this.子组件定义的属性名 = this.子组件接收父组件时用的属性名
    }
 }

2. Accept @the passed method, through this.$emit("The method that the parent component wants to pass to the child component
   ", parameter)

  子组件调用接口后，需刷新页面。参数可传可不传
  this.$emit("父组件要传给子组件使用的方法",参数)

3. Examples

1. parent-child module

<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. 使用注册的子组件 并执行步骤5. 父传参给子-->
		<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. 注册子组件
		components:{
    
    ChildDetail},
		data(){
    
    
			return{
    
    
				grandpaList:[],
				viewFatherDialog:false,  // 1. 定义属性名
			}
		},
		mounted(){
    
    
			this.fetchData()
		},
		methods:{
    
    
			fetchData(){
    
    
				getList(传的参数).then(res=>{
    
    
					this.grandpaList = res.data
				})
			}
		}
	}
</script>

2. child with parent module

<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. 接受通过` : `传的值，通过 `props`
		props:{
    
    show},
		data(){
    
    
			return{
    
    
				dialogVisible:false,
			}
		},
		// props接受到的值要改变,只能用watch
		watch:{
    
    
			show(){
    
    
				this.dialogVisible = this.show
			}
		},
		methods:{
    
    
			close(){
    
    
			},
			handleSubmit(){
    
    
				submit(传的参数).then(res=>{
    
    
				// 3. 提交（新增/编辑/删除）后一般需刷新页面
					this.$emit("fetchData")
				})
			}
		}
	}
</script>

Four.爷孙调用

1. use firstprovide抛出去
   
2. grandson useinject接收
   
3. this.爷爷辈的方法()After receiving it can be used directly in the components of the grandchildren

If inject:['method name error'], it can be changed to

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

V. Reference Appendix

1. Grandpa and grandson : how to pass on ginseng
2. inject['method name error']: how to solve it