数据传递

最新推荐文章于 2022-10-10 15:07:31 发布

红烧鱼+奶茶

最新推荐文章于 2022-10-10 15:07:31 发布

阅读量195

点赞数

分类专栏： vue2 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/interstingh/article/details/123753231

版权

vue2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

provide inject

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
inject 选项应该是一个字符串数组或一个对象
父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据

<body>
  <div id="app">
    <Parent></Parent>
  </div>

</body>
<script>
  Vue.component('cp1', {
    template: `<div>我是cp1的组件 provide a:{{a}}</div>`,
    //从祖辈组件里获取provide提供的值
    inject: ['a']  //inject第一种写法数组
  })
  Vue.component('cp2', {
    // template:`<div>我是cp2的组件 provide  a:{{a}}</div>`,
    // inject:['a']
    template: `<div>我是cp2的组件 provide  c:{{c}} d:{{d}}</div>`,
    inject: {  //inject的第二种写法  对象
      newc: 'c', //newc是在cp2组件内使用的名字 'c'对应要注入的输入
      c: 'c',

      d: {  //inject的第三种写法
        from: 'd',//从哪里注入
        default: '我是默认值'  //如果没有祖辈组件里对应的值注入，就使用默认值
      }

    }

  })
  Vue.component('Parent', {
    template: `<div>
                    我是Parent组件 provide a:{{a}}
                    <cp1></cp1>
                    <cp2></cp2>
              </div>`,
    inject: ['a'],
    provide () { //provide 的第二种写法可以是一个函数返回一个对象
      return {
        c: 'hi weekend is coming',
        // d:'我是人人'
      }
    }
  })
  new Vue({
    el: '#app',
    // Parent组件里的所有组件都可以拿到provide里的值
    //provide 第一种写法可以直接是一个对象
    provide: {
      a: 1
    }
  })

</script>

红烧鱼+奶茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据传递

provide injectprovide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。inject 选项应该是一个字符串数组或一个对象父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据<body> <div id="app"> <Parent></Parent> </div></body><script>
复制链接

扫一扫