父组件给子组件传值另外一种方式


一、说明

常规的方法中 父组件 传值给 子组件时,用到props属性即可,但有时候这个方式并不能达到我们的预期效果,此时就有了另外一种传值方法。

二、传值原理

子组件是添加在父组件中的,那么父组件就可以获取到子组件并且获取到子组件的方法等。这就可以通过父组件去调用子组件的方法,从而达到传值的效果。


Vue中数据更新而界面不更新的怪异问题(Vue中$set的使用)


一、问题描述

是否有遇到过,数据更新后,界面并没更新的现象?排除数据请求时的先后问题,这是怎么回事呢?

基本的问题就是当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

二、问题分析

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

受 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。


元素垂直居中设置技巧


一、场景

在页面中,经常会遇到图片水平方向和垂直方向都需要居中的效果。只是通过简单的margin方式进行调整是不够的,因为对于图片大小不一致的情况下,这个方式就是有问题的。

二、垂直居中设置技巧

原理: 元素A需要设置居中,添加B元素作为A元素居中的基线参考(inline-block支持text-align和vertical-align属性)

下图中,是说到原理。span元素高度和外层盒子高度保持一致,而img元素则参考span,添加垂直居中属性,会使得图片可以居中显示。

Snip20190521_85.png