Vue中组件通信
在vue中实现组件通信的几种方式
1.普通方式（通过ref的方式绑定子组件，或者将父组件暴露给子组件）
如父级找子级案例
父级中的元素被点击，对子元素的变量实行加1操作
//parent.js
import Vue from 'vue/dist/vue.esm';
import Child from './child.js';
export default Vue.component('parent',{
data(){
return {a:12}
},
component:{
Child
},
methods:{
add(){
console.log(this.$refs.child.b++)
}
},
template:`
<div>
父级
<input type='button' value='+1' @click='add()'>
<child ref='child'/>
</div>
`
})//child.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('child',{
data(){
return {b:0}
},
template:`
<div>
子级
<p>{{b}}</p>
</div>
`
})//vm.js
import Vue from 'vue/dist/vue.esm';
import Parent from './parent.js';
let vm = new Vue({
el:'#app',
components:{
Parent
},
template:`
<div>
<parent/>
</div>
`
})//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
</div>
<script type="text/javascript" src='dest/bundle.min.js'></script>
</body>
</html>执行效果 父级中的元素被点击对子元素进行加1
子元素找父元素同理，只是父元素需要主动将this暴露给子元素，子元素接收父元素即可。
2.通过组件事件实现组件通信
//parent.js
import Vue from 'vue/dist/vue.esm';
import Child from './child.js';
export default Vue.component('parent',{
data(){
return {a:12}
},
component:{
Child
},
methods:{
send(){
this.$refs.child.$emit('add_num',3)//向子组件发送一个add_num事件
}
},
template:`
<div>
父级
<input type='button' value='+1' @click='send()'>
<child ref='child'/>
</div>
`
})//child.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('child',{
data(){
return {b:0}
},
created(){
this.$on('add_num',function(n){
this.b+=n;
})
},
template:`
<div>
子级
<p>{{b}}</p>
</div>
`
})3.通过vuex
详见组件通信之vuex
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-05-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
