您的位置：首页 > 产品设计 > UI/UE

Vue 组件通信（组件间通信）

2017-12-18 16:00 302 查看

1、中央事件总线bus

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>

<body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>

</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var bus = new Vue();
Vue.component('my-component', {
template: `<button @click="handleEvent">传递事件</button>`,
methods: {
handleEvent: function() {
bus.$emit('on-message', '来自组件my-component的内容')
}
}
})
new Vue({
el: "#app",
data: {
message: ''
},
mounted: function() {
var _this = this;
//监听来自bus实例的事件
bus.$on('on-message', function(msg) {
_this.message = msg;
})
}
})
</script>
</body>

</html>

2、父链

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>

<body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: `<button @click="handleEvent">通过父链修改数据</button>`,
methods: {
handleEvent: function() {
this.$parent.message = '来自组件my-component的内容'
}
}
})
new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body>

</html>

注：尽量少用，父子组件最好通过props和$emit来通信。

3、子组件索引

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Vue</title>
</head>

<body>
<div id="app">
<button @click="handleRef">获取子组件内容</button>
<p>父组件：{{message}}</p>
<my-component ref='comA'></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>子组件</div>',
data:function(){
return {
message:'子组件内容'
}
}
});
new Vue({
el: "#app",
data:{
message:''
},
methods:{
handleRef:function(){
var msg = this.$refs.comA.message;
this.message = msg;
}
}
})
</script>
</body>

</html>

注：仅仅作为直接访问子组件的应急方案，避免在模板或者计算属性中使用$refs.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航