基于作用区隔离原则,vue子页不允许修改父页(容器)的属性,但有时候又有这样的需求,那怎么办呢?

其实可以在mounted()中直接操作document,如:

document.querySelector('body').style['background'] = '#ffffff';

注意:不要使用

document.querySelector('body').setAttribute('style', 'background: #f5f5f5');

会影响其它页面,比如后退返回上一页时。

补充:(比如项目app.vue中设置了body为#f5f5f5,如果在子页面中修改了body,那后退或直接访问其它页面时,可能会影响body,所以要在消毁时把body改回去)

mounted() {

  document.querySelector('body').style['background'] = '#ffffff'

},

beforeDestroy() {

  document.querySelector('body').style['background'] = '#f5f5f5'

}