【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject

这篇具有很好参考价值的文章主要介绍了【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. 父传子

  1. 父组件先在data中定义要传给子组件的属性名
  2. 父组件在中引入子组件
  3. 在components中注册
  4. 使用步骤 3 中注册好的子组件
  5. 在 3 中,父传子
    (1)利用 : 将父组件的对象、数组、字符串等传给子组件,供子组件使用
    (2)利用 @ 将父组件的方法传给子组件,供子组件调用
 :子组件接收父组件时用的属性名 =  父组件要传给子组件的属性名
 @子组件接接收父组件使用的方法 = 父组件要传给子组件使用的方法

二. 子用父

  1. 接受通过:传的值,通过 props
    若为字符串和数组,如下
 props:{
 	子组件接收父组件时用的属性名:{
 		type:String,
 		default:''
 	}
 }
 
或直接 props:{'子组件接收父组件时用的属性名'}
 props:{
 	子组件接收父组件时用的属性名:{
 		type:Array,
 		default:()=>{}
 	}
 }
 
或直接 props:{'子组件接收父组件时用的属性名'}

这里切记:通过props接受到的值是不能改变的,如果要改变只能重新再子组件定义,然后通过watch将父组件的值传给该定义好的属性,即可渲染

 watch:{
	子组件接收父组件时用的属性名(){
		this.子组件定义的属性名 = this.子组件接收父组件时用的属性名
    }
 }
  1. 接受通过@传的方法,通过this.$emit("父组件要传给子组件使用的方法
    ",参数)
  子组件调用接口后,需刷新页面。参数可传可不传
  this.$emit("父组件要传给子组件使用的方法",参数)

三. 举例

  1. 父传子模块
<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>
  1. 子用父模块
<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>

四. 爷孙调用

  1. 先使用 provide抛出去
    【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject
  2. 孙子使用 inject接收
    【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject
  3. 接收后可在孙子辈的组件直接 this.爷爷辈的方法()即可

若inject:[‘方法名报错’],则可更改为文章来源地址https://www.toymoban.com/news/detail-475442.html

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

五. 参考附录

  1. 爷孙:如何传参
  2. inject[‘方法名报错’]:如何解决

到了这里,关于【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE3父子组件传参

    父传子 父组件 template    sonComponent :sendValue=\\\"value(//传递的值)\\\"/sonComponent /template //引入组件 import sonComponent from \\\"XXXXX\\\"; 子组件 //定义名字与父组件对应 const props = defineProps({   sendValue:{type: String,default:\\\'\\\'}  }) 子传父 子组件 // 定义发送 const emit = defineEmits([\\\'sendValue\\\']) //发送(在想

    2024年02月07日
    浏览(42)
  • 【vue3】vue3中父子组件传参:

    一、父传子: 【1】父组件传值: 【2】子组件接收: 二、父调用子方法: 【1】父组件调用: 【2】子组件暴露: 三、子组件发送emit方法给父组件: 【1】父组件: 【2】子组件调用:

    2024年02月13日
    浏览(38)
  • Vue3父子组件间传参通信

    本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3+TypeScript 父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps接收使用。 如下为父组件 Father.vue 如下为子组件Son.vue 父组件 Father.vue 中在调用 Son.vue 这个子

    2024年01月19日
    浏览(75)
  • vue父子组件之间的传参的几种方式

    这是最常用的一种方式。通过props选项,在父组件中传递数据给子组件。在子组件中使用props声明该属性,就可以访问到父组件传递过来的数据了。 子组件向父组件传递数据的方式。在子组件中使用emit方法触发一个自定义事件,并通过参数传递数据。在父组件中监听这个事件

    2023年04月24日
    浏览(68)
  • flutter开发实战-父子Widget组件调用方法

    flutter开发实战-父子Widget组件调用方法 在最近开发中遇到了需要父组件调用子组件方法,子组件调用父组件的方法。这里记录一下方案。 父组件使用globalKey.currentState调用子组件具体方法,子组件通过方法回调callback方法调用父组件的方法。 例如示例中的 例如父组件 父组件使

    2024年02月15日
    浏览(42)
  • 前端vue中父子组件之间的传值(修改值)和事件的相互调用

    目录 父组件向子组件传值 子组件修改父组件中的值: 方法1 方法2 子组件调用父组件里的函数 方法1 方法2 父组件调用子组件的函数 : 子组件中的 data 属性是用来存储子组件自身的数据,而不是用来接收父组件传递的数据的。父组件向子组件传递数据的常用方式是通过 pro

    2024年02月07日
    浏览(54)
  • Vue组件通信——父子组件通信的四种方法

    全局引入 在main.js文件中引入并注册 之后就可以全局使用组件了 局部引入 在父组件中引入 之后就可以在父组件中使用组件了 在子组件 prop 中可以注册一些自定义组件属性,父组件调用子组件时可以向 prop 中的自定义属性传值。 子组件代码: 父组件代码 prop 也可以通过 v-

    2023年04月16日
    浏览(99)
  • 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

    父组件 子组件: 方法一、通过子组件iframe1向父组件传值,再通过父组件向子组件iframe2传值可达到目的; 注意:模拟时 需要开启服务器,否则会出现跨域问题! 看图你应该就明白了 在项目中使用iframe引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器

    2024年02月01日
    浏览(47)
  • vue父子组件之间传值的方法

    父传子 方式: props 效果: 把父组件的 fatherName 属性传入子组件,在子组件中使用 父组件代码: 子组件代码: 子传父 方式: $emit 效果: 在子组件触发事件,修改父组件的fatherName属性 父组件代码: 子组件代码: 兄弟传值 方式: eventBus.js 效果: 任意组件之间相互传值 代

    2024年02月09日
    浏览(44)
  • vue组件之间的五种传值方法(父子\兄弟\跨组件)

    父传子 (自定义属性 props) 父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用。 子传父 (自定义事件 this.$emit) 子组

    2023年04月08日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包