文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > Vue.js > 正文

如何监听Vue的插槽变化？试试这一招！

青灯夜游

发布： 2022-09-28 19:52:45

转载

3170人浏览过

如何监听vue的插槽变化？下面本篇文章给大家介绍一下监听vue插槽变化的方法，希望对大家有所帮助！

如何监听Vue的插槽变化？试试这一招！

最近，每当组件的内容(插槽、子组件等)发生变化时，我需要更新它的状态。对于上下文，它是一个表单组件，用于跟踪其输入的有效性状态。

下面的代码片段是以Options API格式编写的，但除了指定的地方外可以在Vue2 和 Vue2中使用。【相关推荐：vuejs视频教程】

开始

先从控制表单状态开始，根据状态修改一个类，孩子内容使用填充：

立即学习“前端免费学习笔记（深入）”；

<template>
  <form :class="{ '--invalid': isInvalid }">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
};
</script>

登录后复制

为了更新isInvalid属性，我们需要添加一个触发的事件，可以使用 sumit 事件，但我更喜用 input 事件。

表单事件7个: focus, blur, input, select, change, reset, submit 等，具体详解看这篇文章：https://blog.csdn.net/qq_4379...

表单不会触发 input 事件，但我们可以使用 "事件委托"。我们将监听器附加到父元素（

）上，当事件发生在它的子元素（、

等）上时就会被触发。<p>任何时候在这个组件的<slot>中触发input事件，表单将捕获该事件。</slot></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template>
  <form :class="{ '--invalid': isInvalid }" @input="validate">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      // 验证逻辑
    }
  }
};
</script></pre><div class="contentsignin">登录后复制</div></div><p>验证逻辑可以是简单或复杂的。本文为了演示，用简单的方法，使用form.checkValidity()  API 来查看表单是否基于HTML验证属性而有效。</p>
<p>为了访问</p>
<form>元素。可以用refs或$el属性。为了简单起见，本文使用$el。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template>
  <form :class="{ '--invalid': isInvalid }" @input="validate">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity()
    }
  }
};
</script></pre><div class="contentsignin">登录后复制</div></div><h3 id="item-2"><strong>问题</strong></h3>
<p>这里有一点问题。如果表单的内容改变了，会发生什么？如果一个<input>在表单加载被添加到DOM中，会发生什么？</p>
<p>举个例子，我们把这个表单组件称为 "MyForm"，在 App 中，内容如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">// App.vue
<template>
  <MyForm>
    <input
      v-model="showInput"
      id="toggle-name"
      name="toggle-name"
      type="checkbox"
    />
    <label for="toggle-name">显示其它 input</label>

<template v-if="showInput">
      <label for="name">Name:</label>
      <input id="name" name="name" required />
    </template>

<button type="submit">提交</button>
  </MyForm>
</template>

<script>
import Form from "./components/form.vue";
export default {
  name: "App",
  components: {
    MyForm: Form,
  },
  data: () => ({
    showInput: false,
  }),
};
</script></pre><div class="contentsignin">登录后复制</div></div><p>当App.vue通过条件来隐藏显示某些 input，我们的表单需要知道。在这种情况下，我们会想到在表单内容发生变化时跟踪其有效性，而不仅仅是在 input 事件或mounted生命周期钩子上。否则，可能会显示不正确的信息。</p>
<p>熟悉 Vue的生命周期钩子小伙伴，这里可能会想到使用 update 来跟踪变化。理论上，这听起来不错。在实践中，它会创造一个无限的循环，然后浏览器挂了。</p>
<h3 id="item-3"><strong>解决方法</strong></h3>
<p>经过一番研究和测试，最佳解决方案是使用MutationObserver API。它是浏览器内置的方法，提供了监视对DOM树所做更改的能力，如果节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。</p>
<p>它是原生的方法，所以不受限于框架。</p>
<p>使用时，首先使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。在每次 DOM 变动后调用，这个回调都被调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，将我们的 form 组件改写成如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template>
  <form :class="{ '--invalid': isInvalid }" @input="validate">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  mounted() {
    const observer = new MutationObserver(this.validate);
    observer.observe(this.$el, {
      childList: true,
      subtree: true,
    });
    this.observer = observer;
  },
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity();
    },
  },
  beforeUnmount() {
    this.observer.disconnect();
  },
};
</script>

<style scoped>
</style></pre><div class="contentsignin">登录后复制</div></div><p>这里还需要使用 beforeUnmount生命周期事件来断开observer的连接，这会清除它所分配的任何内存。</p>
<p>最后，我们将isInvalid状态传递给要访问的内容的插件槽，这也称作用域的槽，它非常有用。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template>
  <form :class="{ '--invalid': isInvalid }" @input="validate">
    <slot v-bind="{ isInvalid }" />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  mounted() {
    const observer = new MutationObserver(this.validate);
    observer.observe(this.$el, {
      childList: true,
      subtree: true,
    });
    this.observer = observer;
  },
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity();
    },
  },
  beforeUnmount() {
    this.observer.disconnect();
  },
};
</script></pre><div class="contentsignin">登录后复制</div></div><p>通过这样的设置，可以在我们的表单组件中添加任意数量的 input，并添加任何它需要的条件渲染逻辑。只要input使用HTML验证属性，表单就会跟踪它是否处于有效状态。</p>
<p>此外，由于使用的是作用域槽，我们将表单的状态提供给父级，所以父级可以对有效性的变化做出反应。</p>
<p>例如，在 App.vue，我们想在表单无效时 "禁用" 提交按钮，可以这么来写</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template>
  <MyForm>
    <template slot:default="form">
      <label for="name">Name:</label>
      <input id="name" name="name" required>

<button
        type="submit"
        :class="{ disabled: form.isInvalid }"
      >
        Submit
      </button>
    </template>
  </MyForm>
</template></pre><div class="contentsignin">登录后复制</div></div><p>nice~.</p>
<p>希望本文能对你未来的开必有所帮助。</p>
<p>（学习视频分享：<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端开发</a>、<a href="https://www.php.cn/course/list/91.html" target="_blank" textvalue="编程基础视频">编程基础视频</a>）</p>
</form>

以上就是如何监听Vue的插槽变化？试试这一招！的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

相关标签：

vue

来源：segmentfault网

上一篇：原理详解：Vue3中reactive和ref的区别下一篇：Vue组件间的通信方式详析

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

深入搞懂Redis中的哨兵

2023-04-26 17:59:18
【整理分享】7个热门的React状态管理工具

2023-04-26 17:47:48
一文讨论Vue2中key和Vue3中key的区别

2023-04-26 17:41:42
一文聊聊Node中的内存控制

2023-04-26 17:37:05
实用Excel技巧分享：4种删除重复值的小妙招！

2023-04-26 17:31:25
实用Word技巧分享：简繁转换功能竟然可以这样用！

2023-04-26 17:27:32
如何解决跨域？常见解决方案浅析

2023-04-25 19:57:58
一文理解JavaScript中的单例模式

2023-04-25 19:53:11
深入了解Node中的Buffer

2023-04-25 19:49:11
探讨如何在Vue3中编写单元测试

2023-04-25 19:41:54

最新问题

Vue的事件修饰符（如.stop和.prevent）有哪些？ Vue事件修饰符包括.stop阻止冒泡，.prevent阻止默认行为，.once实现一次监听，.capture捕获阶段触发，.passive优化滚动性能，且可组合使用。例如@click.stop.prevent可同时阻止冒泡和默认行为。

2025-06-14 10:21:01

967

Vue.js实现博客系统的详细步骤选择Vue.js构建博客系统是因为其灵活性和易用性。构建步骤包括：1.使用VueCLI搭建项目结构；2.设计文章列表、详情、登录/注册、发布/编辑等组件；3.使用VueRouter实现页面导航；4.利用Vuex管理用户状态；5.处理表单数据和文件上传；6.优化性能和确保安全性。

2025-06-13 08:03:01

253

Vue的响应式系统是如何追踪依赖的？ Vue的响应式系统通过依赖追踪实现自动更新视图。1.数据劫持：Vue2使用Object.defineProperty，Vue3使用Proxy，使数据在被访问或修改时可被观测；2.依赖收集：当数据被读取时，如在模板中使用{{message}}，当前watcher会被记录到该数据的依赖列表中；3.派发更新：数据变化时触发setter或Proxy的set，通知所有依赖的watcher异步批量更新。此外，数组需用变异方法更新，新增属性需用Vue.set，深层响应则通过递归实现。掌握这三步机制，便能理解V

2025-06-12 11:15:01

889

Vue的v-once指令对性能有什么影响？ v-once在Vue中的作用是让元素或组件只渲染一次，后续数据变化不会触发重新渲染。适合用于静态内容如帮助文档、固定标题等初始化后不再改变的场景，减少diff对比开销；适用于一次性展示的配置项、常量信息等静态数据绑定；但优化效果仅在大量静态内容存在时才明显。使用时需注意避免滥用，防止数据变更不生效、与响应式系统冲突以及增加调试成本；建议仅在明确内容不变时使用，例如用户注册时间展示，而动态内容如昵称则不应使用。

2025-06-11 10:06:02

417

Vue的errorCaptured钩子如何捕获子组件错误？ Vue的errorCaptured钩子可以捕获子组件的错误，并在父组件中统一处理。1.它能捕获渲染函数、生命周期钩子和watcher中的同步错误；2.不会捕获异步错误、Promiserejection和父组件自身的错误；3.错误会从最近祖先逐级向上冒泡，返回false可阻止传播；4.建议结合Vue.config.errorHandler实现全局错误兜底处理，从而构建完整的前端错误监控体系。

2025-06-10 08:48:02

292

Vue中的nextTick方法有什么具体作用？ nextTick的核心作用是在下一次DOM更新完成后执行指定的回调函数，确保数据变化已反映到视图上。常见使用场景包括：1.获取更新后的DOM尺寸；2.手动设置输入框焦点；3.触发动画或第三方插件。使用方式有两种：一是传入回调函数，如this.$nextTick(()=>{});二是配合Promise使用async/await。例如新增列表项后滚动到底部需用nextTick确保DOM已更新。注意事项包括避免滥用、可在生命周期钩子中使用、与setTimeout不同之处在于执行时机更精准，且多个nex

2025-06-09 10:27:05

953

怎样通过实践项目巩固Vue.js知识巩固Vue.js知识的最佳方法是通过实际项目进行实践。1.通过项目将理论转化为实际操作，发现学习中的细节和问题。2.面对实际问题，如组件性能优化、状态管理、路由管理，深入理解核心概念。3.使用Vuex管理状态，学习模块化技巧提高代码可维护性。4.选择合适的工具，如VueRouter、ElementUI，根据项目需求学习成长。5.解决组件通信问题，使用provide/inject特性增强灵活性。6.优化性能，理解虚拟DOM和diff算法，使用v-if/v-show提升渲染效率。通过项目实践，你能巩

2025-06-08 08:45:01

523

如何利用文档深入学习Vue.js 要深入学习Vue.js，应从官方文档入手。1)通读“指南”部分，掌握核心概念和基础知识。2)深入研究“API”部分，结合示例代码实践常用API。3)利用“Cookbook”解决常见需求。4)积极参与“社区”讨论，解决疑难杂症并了解最新动态。5)学习性能优化和最佳实践，提升代码质量。

2025-06-07 09:21:01

881

Vue组件间如何通信？props和$emit怎么用？在Vue开发中，组件通信的基础方式是父组件通过props向下传递数据，子组件通过$emit向上传递事件。一、父组件通过定义props属性向子组件传值，子组件显式声明props类型并接收数据；二、子组件使用this.$emit触发事件通知父组件修改数据，父组件监听事件并执行对应方法处理；三、兄弟组件通信可通过共同父组件中转实现，即一个子组件通过$emit通知父组件，父组件再通过props传递给另一个子组件；四、常见注意事项包括设置props默认值、使用冒号绑定变量以及统一事件命名规范等，合理使用这

2025-06-06 08:21:01

605

怎样优化Vue.js项目的首屏加载速度优化Vue.js项目首屏加载速度可以通过以下三种方法：1.代码分割：使用webpack按需加载组件，减少首屏加载时间。2.静态资源优化：压缩并转化为base64编码的图片，提升加载速度。3.服务端渲染（SSR）：在服务器端渲染首屏内容，显著降低加载时间。

2025-06-05 13:24:01

1016

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部