Vue中 key keep-alive

最新推荐文章于 2024-08-02 13:26:42 发布

w1366352655

最新推荐文章于 2024-08-02 13:26:42 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/w1366352655/article/details/86156107

版权

Vue中 key keep-alive

keep-alive key

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <div id="app"> <keep-alive> <child-component key="1" v-if="seen" name="1"></child-component> <child-component key="2" v-if="!seen" name="2"></child-component> </keep-alive> <button @click="toggle">toggle</button> </div> <script type="text/javascript"> Vue.component('child-component', { template: `<input type="text" placeholder="enter">`, data() { return {} }, props: ["name"], mounted() { console.log(`${this.name} mounted`) } }) const vm = new Vue({ el: "#app", data: { seen: true }, methods: { toggle() { this.seen = !this.seen; } } }) </script> </body> </html>

key是标识元素不再被复用，注意key是Vue中的一个保留的属性，不能作为prop传递给子组件，否则会在控制台看到Vue的报错

但是keep-alive标识不重复创建组件实例，也就是只会触发一次created mounted事件，

利用两者可以对组件的复用进行比较精细的管理

来源：https://segmentfault.com/a/1190000016432362