vue前端开发自学,借助KeepAlive标签保持组件的存活

vue前端开发自学,借助KeepAlive标签保持组件的存活!如果不想让组件在切换的时候,被默认操作(卸载掉了)。他们需要使用这个这个表情哦。

下面给大家看看代码情况。


这个代码是来自ComA.vue的内容。里面有一个切换数据的按钮。可以控制当前组件里面的p标签的内容。目的是为了显示给大家看看,组件切换的时候,默认是会被卸载的。再次切回来,就会重新走一遍组件的生命流程。


这个代码是来自App.vue入口组件的内容。里面我们使用了keepAlive标签,把之前那个组件显示的标签,包围起来。就可以确保,切换组件不会再触发卸载了。

vue前端开发自学,借助KeepAlive标签保持组件的存活_第1张图片

如图,切换组件显示,我们现在看见的切换后的组件B。

vue前端开发自学,借助KeepAlive标签保持组件的存活_第2张图片

如图,我们再次切换,改成了之前的组件A的显示了。但是里面的新数据依旧可以看得见。说明,刚刚切换组件时,并未发生卸载。

你可能感兴趣的:(vue,vue.js,前端,javascript)