vue中provide和inject的用法

vue中provide和inject的用法

1、provide与inject的功能

通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙后代

provide 和 inject 主要在开发高阶插件/组件库时使用

2、使用示例

3个组件 A(父级)、B(子级)、C(孙子级)

父组件A ---- 通过provide指定传递给子孙组件的值

2、使用示例

3个组件 A(父级)、B(子级)、C(孙子级)

父组件A ---- 通过provide指定传递给子孙组件的值

export default { 
    provide() { 
    // provide是一个匿名函数，返回一个对象 return { 
    reload: this.reload， msg:this.msg }; }, data(){ 
    return { 
    msg:'hello world!' } }, methods: { 
    reload() { 
    console.log("C调用A的方法！"); }, }, }, 

子/孙组件 ---- 通过inject 获取祖先组件传递过来的值

export default { 
    //inject: ["reload","msg"], 简写 inject:{ 
    // 详细指定来源以及默认值 msg:{ 
    from:'A', //表示从组件A传递过来的 default:'a default msg' }, reload:{ 
    from:'A' } }, mounted() { 
    this.reload(); }, }, 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10701.html