【详细的vue组件通讯的几种方式,需掌握!】
组件通讯常用的有 父传子 props 子传父 $emit 兄弟组件通讯 $bus
详细用法在这篇文章内 :http://t.csdn.cn/zbwBk
其他通讯方式还有 :
1、vuex 将数据存入vuex中,成为公共的数据
2、本地存储
3、$parent 子组件可以获取父组件的实例 (是一个 对象)
4、$children 父组件可以获取子组件的实例 (是一个 数组)
5、$refs 可以获取整个子组件的实例
<com ref="com"></com>
mounted() {
console.log(this.$refs['com']);
},
6、$attrs 可以获取父组件的所有属性,但是如果该属性在 props 里面接收了,就获取不到了
//在父组件中
<com name="张三" age="18" ></com>
//在子组件中
created() {
console.log(this.$attrs);
},
7、provide inject 注入 在页面注入完成后,子组件,孙组件、、、都可以获取到这个值(但是在 vue 2 中不可以动态更新数据,在 vue 3 中可以,所以在 vue2 中一般用于传递常量 )
//在父组件中
provide:function(){
return {
url: 'https://www.baiidu.com'
}
},
//在子组件中
inject:['url'],