基于现在都是模块化开发,vue开发过程中组件之间传值是必不可少的,传值的方法有很多,今天整理一些组件之间传值的方法。
Props:
这个方法应该是最常用的,父组件通过bind指令传给子组件,子组件通过跟data同级的props数组接收。
父组件:
子组件:props: ['msg']
然后子组件就可以使用msg这个值了。
$parent:
子组件修改父组件数据,这要在props的基础上才能使用,子组件修改父组件直接赋值会报错,使用this.$parent.msg = ‘修改父组件’;子组件就可以修改父组件的数据。
$emit:
也是很常见的放,子组件通过方法传递参数给父组件。
父组件:
<model @btn="btn">
btn(val){ console.log(val); }
子组件:this.$emit(‘btn’, ‘我是传递给父组件方法的参数’);
ref:
父组件:
父组件调用:this.$refs.headcar
父组件通过$refs调用子组件的方法和属性。
.sync修饰符:
父组件:
{{msg}}
子组件:
watch:{ index(val){ this.$emit('update:msg', val) } },
这个方法用的比较少,因为emit调用方法就能实现了。
Vuex全局状态管理器:
这个是vue的一个状态管理模式,这个就不多讲了,不过我们说的是组件之间传值,虽然vuex可以实现,但是并不符合数据共享的概念,并不推荐。
listeners:
这两个一个是传递数据,一个是调用方法回传数据。跨组件之间传递数据使用这两个属性非常有用。接下来我会用四个组件,结构如下:
A组件:<model1 :msg="msg" @btn="btn" :tre="tre">
B组件:
C组件:
D组件:{{msg}}this.$emit("btn", '我是第N个组件');
简单说listeners是传递方法,通过v-bind和v-on指令跨组件传递数据(实践不能简写),方法在每个组件之间都能调用。而attrs的数据要用props获取,但是要注意,要是B组件props: [‘msg’],在B组件可以使用msg数据,但是C和D组件就无法获取msg数据,等于被拦截了。
Provide和inject
父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。
父组件:
provide(){ return { all: this.msg, } },
这边通过跟data一样返回,主要是为了可以调用当前的数据,直接用json格式只能写死数据。
在父组件生命周期内的任何子组件:
inject: ['all']
然后就可以调用这个数据了。这边要注意一点,想要响应式的改变各个子组件的数据,msg想要是一个对象,否则子组件不会动态响应all这个数据。使用provide和inject的时候,要注意,因为这跟props不一样,不是局限于从当前父组件获取的,所以在非常多组件之间调用的时候,不利于维护。
Vue组件通信大概就这几个,当然,要是使用JavaScript的方法,比如全局绑定在某个方法或者属性,本地缓存等也是可以的。不过大部分看起来还是基于props和emit。
欢迎关注Coding个人笔记 公众号