组件传值(provide/inject)

1,308 阅读1分钟

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

父组件 provide 把参数传递出去,子组件 inject 接受 字段名需对应

父组件:

<template>

<div>

{{msg}}

<Inject></Inject>
</div>

</template>

<script>

import Injectfrom './inject'

export default {

name:'provide',

  data () {

return {

    msg:'provide--inject',

   arr: {

   list: []

    }

  }

},

  components: { Inject },

  provide(){

return {

self:this,

    item:this.arr

  }

},

  created() {

    let that =this;

    let url ='http://www.liulongbin.top:3005/api/getprodlist';

    this.$axios.get(url).then(res => {

    let arr = res.data.message;

    that.arr.list = arr;

    });

  }

}

</script>

子组件:

<template>

<div>

<hr>


<p>inject--{{item}}

<hr>

<p v-for="opt inlist.list">{{opt.name}}

<script>

export default {

name:'Inject',

  data () {

return {

list:this.self,

    item:this.item

    }

},

  inject: ['self','item'],

  created(){

console.log(this)

console.log(this.self)

}

}

</script>