menu
more_vert
vue.js 组件之间如何实现数据传递?

作者:dayu

<button @click="showDialog">显示弹框</button>
</div>
</template>
<script>
import dialog from ’./dialog.vue’;
export default {
components: { dialog },
data() {
return {
show: false
}
},
methods: {
showDialog() {
this.show = true;
},
hideDialog() {
this.show = false;
}
}
}
</script>
在子组件dialog.vue中:
<template>
<div class="dialog" v-show="isShow">
<p>这里是弹框子组件</p>
<button @click="toHide">关闭弹框</button>
</div>
</template>
<script>
export default {
//驼峰式命名的prop需要转换为相对应的短横线隔开式is-show
props: [’isShow’],
methods: {
toHide(){
// $emit方法触发父组件的监听事件
this.$emit(’hide’);
}
}
}
</script>
这样就实现了父子组件之间的相互通讯。
Vuex
上面的例子都是建立在父子关系的组件上,但是对于其他层级的关系,实现起来就比较繁琐了。那么这时候Vuex就能更好的帮你在各个组件间实时通讯了。
总结
组件通讯并不是一定要使用必须要使用Vuex,对于一些简单的数据传递,prop也可以完成。本文主要是对组件传参的一些基础知识点的记录。

来源:博客园

vue.js 组件之间如何实现数据传递?