provide & inject 跨组件传值

provide & inject

作用:可实现跨组件传值,数据的流只能是向下传递

provide : 必须在分级组件(不一定是app.vue)进行使用,用来给后代组件注入依赖(属性或方法)

inject : 必须在子组件进行使用,用来获取根组件定义的跨组件传递的数据

应用方法:

  1. 根组件定义:

    <template>
     <div id="app">
       <h1>appVue父组件</h1>
       <Child9/>
     </div>
    </template>

    <script>
    import Child9 from './components/child9'
    export default {
     components:{
       Child9,
    },
     /*
    provide(){   //provide作为一个方法使用 ( 推荐使用 )。
      return{
        'userName' : 'bruce',
      }
    },
    */
     provide : {  //provide也可以作为一个对象进行使用.
       "userName" : 'bruce',
    }
    }
    </script>
  2. 子组件接收:

    <template>
       <div class="box">
           <h2>组件10</h2>
           <h3>接受到根组件的传递的数据{{userName}}</h3>   <!-- 使用根组件传递过来的数据 -->
       </div>
    </template>
    <script>
    export default {
      // inject : ['userName']     //inject后面用一个数组接收
      inject : {                   //inject后面可以是一个对象
           userName : {
               default : '默认值'  //指定默认值
          }
      }
    }
    </script>
  3.  

上一篇:Penetration Test - Planning and Scoping(3)


下一篇:微信小程序警告:Now you can provide attr "wx:key" for a "wx:for" to improve performance.