提示: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>