Vue privide 和inject 依赖注入的用法

Vue的provide和inject选项主要用于高级组件开发,它们允许祖先组件向深层子孙组件注入依赖。在父组件中使用provide暴露方法或数据,而在子组件中通过inject接收并使用。尽管在普通应用中不推荐,但在某些特定场景如表单验证组件的实现中,依赖注入能发挥重要作用。例如,父组件提供标题,并在子组件中触发改变,但注入的数据不具备响应性。详细示例和资源可在CSDN(作者:昝殿慧)获取。
摘要由CSDN通过智能技术生成

1、vue privide 和inject 依赖注入的用法
2、privide 和inject实现表单验证组件(案例资源)
说明:Vue的privide 和inject依赖注入 主要用于高级组件开发,普通应用程序中不建议使用,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
举例:
在父组件中:
dome.vue

<h1>{{title}}</h1>
<!-- 子组件 -->
<dome-item></dome-item>
<script>

//向子组件暴露方法

provide(){
    return{
        title:this.title,
        ranname:this.ranname
    }
},
data(){
    return{
        title:'我是父组件的值'
    }
},
methods:{
    ranname(data){
        this.title = data
    }
}
</script>

子组件中:
dome-item.vue

<button>改变父组件的值</button>
<h1>{{title}}</h1>


export  default {

//使用场景 全局的消息提示框
//inject数组方式接收
inject:['title','ranname'],
methods:{
    clickBtn(){
        this.ranname('kkk')
    }
 }
}

触发前:
在这里插入图片描述

触发点击后:
在这里插入图片描述

***这里注意的是子组件的title接收的父组件,当触发改变父组件title的适合,这个数据不是响应式的 ***
像一些UI 框架自带的表单验证,部分都是使用依赖注入方式实现的,由于这里不好太详细的描述form的实现原理,详细dome,去我CSDN(名称:昝殿慧)资源里可以下载参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昝殿慧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值