Vue组件之间有三种数据传递方式:Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

1.props:子组件的模板内并不能直接使用父组件的数据,所以子组件需要用props选项来获取父组件的数据。

1.动态语法:用v-bind将动态props绑定到父组件的数据,父组件的数据发生改变,子组件也会随之改变

2.绑定修饰符:props默认为单向绑定,是为了防止子组件无意间修改父组件的状态。

于是出现了绑定修饰符:.sync:双向绑定

                                     .once:单次绑定

2.组件通信:自定义事件(每个vue实例都是一个事件触发器)

1.$on()——监听事件。

2.$emit()——把事件沿着作用域链向上派送。

3.$dispatch——派发事件,事件沿父链冒泡。

4.$broadcast——广播事件,事件向下传到后代。

a76465edbf9a18e3d5d0bc662663d41aa1f.jpg

3.slot分发内容——不同的使用场景组件的一部分内容需要有不同的内容显示,而这个slot就好比组件开发时定义的一个参数(通过name值来区分),如果你不传入就当默认值使用,如果你传入了新的值,那么在组件调用时就会替换你定义的slot的默认值。

a6d60e3f2d0b95b9d21fa25aa17d677ab46.jpg

转载于:https://my.oschina.net/bluefrankey/blog/1928709

Logo

前往低代码交流专区

更多推荐