子组件要把数据传递给父级 依靠自定义事件
自定义事件
监听$on(eventName)
触发$emit(eventName)
基本使用方法如下
使用app.$on('text',function(){})来自定义一个事件，实例中我使用click点击事件来触发addn 中的 app.$emit('text')给事件传递参数'hi';
app.$on监听到text 执行打印 value
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app">
<div @click="addn">{{pn}}</div>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
pn:10
},
methods:{
addn:function(){
this.pn+=1;
this.$emit('text','hi');
}
}
});
app.$on('text',function(value){
console.log(value);
})
</script>
给予这个机制 父级组件就可以将父级组件的信息传递给自己组件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<div @click="addn">{{pn}}</div>
<zhe></zhe>
</div>
</body>
<script>
Vue.component('zhe',{
template:'<div v-on:click="myevent">{{mes}}</div>',
data:function(){
return {mes:1}
},
methods:{
myevent:function(){
this.mes+=1;
app.$emit('example','zhe')
}
}
});
var app=new Vue({
el:"#app",
data:{
pn:10
},
methods:{
addn:function(){
this.pn+=1;
this.$emit('example','hi');
}
}
});
app.$on('example',function(value){
console.log(value);
})
</script>
上图为先点击<zhe></zhe>,在点击<div @click="addn">{{pn}}</div>执行结果
这就实现了父级组件监听子级事件，通过事件可以将父级的数据传递给子集
以$on(eventName)和$emit(eventName)配合使用时，须注意的是vue的事件运行类似浏览器的事件运行机制
所有从可以使用浏览器的类似事件机制
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app">
<div @click="addn">{{pn}}</div>
<zhe @myevent="addn(111)"></zhe>
<zhe></zhe>
</div>
</body>
<script>
Vue.component('zhe',{
template:'<div v-on:click="myevent">{{mes}}</div>',
data:function(){
return {mes:1}
},
methods:{
myevent:function(){
this.mes+=1;
this.$emit('myevent')
}
}
});
var app=new Vue({
el:"#app",
data:{
pn:10
},
methods:{
addn:function(value){
this.pn+=1;
console.log(value);
this.$emit('example','hi');
}
}
});
app.$on('example',function(value){
console.log(value);
})
</script>
通过将子级组件的触发函数绑定到父级的事件上
<zhe @myevent="addn(111)"></zhe> 可以理解为触 发父级组件事件的时候绑定了子集的方法函数addn()
换成你熟悉的事件就是<div v-on:click="addn(111)"></div> ;
但是触发myevent 是<div v-on:click="myevent">{{mes}}</div>的click myevent方法中触发