Vue的父子元素和依赖注入

var app = new Vue({
el:"#app",
data:{
foo:1
},
computed:{
bar:function(){
return “bar”
}
},
methods:{
baz:function(){
return “baz”
},
onClickMe:function(){
console.log(this.$refs);
let $mybtn=this.$refs.mybtn;
KaTeX parse error: Expected 'EOF', got '}' at position 20: …n.onClickMe(); }̲ } }) </script>…refs的操作来实现父元素操作子元素或子元素的实例（上述父元素调用子元素组件的foo方法，然后该方法又调用了父元素的data）
或者该方法能够操作DOM元素

依赖注入：

Vue.component(‘my-button’,{
inject:[‘addCount’,‘getCount’],
methods:{
onClickMe(){
console.log(“my-button”,this);
this.addCount();
}
},
template:<button @click="onClickMe">Click</button>
})

var app = new Vue({
el:"#app",
data:{
foo:1
},
computed:{
bar:function(){
return “bar”
}
},
methods:{
baz:function(){
return “baz”
},
onClickMe:function(){
console.log(this.$refs);
let $mybtn=this.$refs.mybtn;
$mybtn.onClickMe();
}
}
})

外层的组件定义了两个方法通过provide，另一个组件通过inject方法进行注入，能够在该组件中调用注入进来的方法(需要注意this)

2222

Vue.component(‘my-button’,{
inject:[‘addCount’,‘getCount’],
methods:{
onClickMe(){
console.log(“my-button”,this);
this.addCount();
alert(this.getCount());
}
},
template:<button @click="onClickMe">Click</button>
})

var app = new Vue({
el:"#app",
data:{
foo:1
},
computed:{
bar:function(){
return “bar”
}
},
methods:{
baz:function(){
return “baz”
},
onClickMe:function(){
console.log(this.$refs);
let $mybtn=this.$refs.mybtn;
$mybtn.onClickMe();
}
}
})

当存在多个的父组件的时候，或者在子组件中写了相同的几个注入的方法，他们之间是不会有者任何影响的