updated钩子函数实例化多次的问题

最新推荐文章于 2024-09-14 18:12:55 发布

借我一份心动i

最新推荐文章于 2024-09-14 18:12:55 发布

阅读量827

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/html_996/article/details/105103343

版权

本文探讨了Vue应用中updated钩子函数因数据变动导致的多次实例化问题，特别是在轮播组件结合数据双向绑定的input时，出现swiper-pagination失效的情况。为解决此问题，文章介绍了使用Vue.nextTick或this.$nextTick来确保updated钩子只实例化一次，从而保持轮播功能正常运行。

摘要由CSDN通过智能技术生成

继上篇文章继续补充一下

上一篇：添加链接描述

当我们的轮播需要添加 swiper-pagination 时，并且添加一个数据双向绑定的 input 时，我们会发现在我们改变 input 框里面的 value 时，我们的 swiper-pagination 按钮就不起作用了，原因是 updated 钩子函数被实例化多次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./base/swiper.min.css">
</head>
<body>
    <div id="app">
        
        <my-banner></my-banner>
    </div>

    <!--创建模板-->
    <template id="my-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
			<div class="swiper-pagination"></div>
			<input type="text" v-model="msg">
			<p id="p">我是p标签 {
  {msg}}</p>
        </div>
    </template>

    <script src="./base/swiper.min.js"></script>
    <script src=