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

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

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

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

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

开始

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

<template>
  <form :class="{ &#39;--invalid&#39;: 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 事件，但我们可以使用 "事件委托"。我们将监听器附加到父元素（

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

</code>等）上时就会被触发。</p><p>任何时候在这个组件的<code><slot></code>中触发<code>input</code>事件，表单将捕获该事件。</p><pre><template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate">
    <slot />
  </form>
</template>

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

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity()
    }
  }
};
</script></pre><h3 id="item-2"><strong>问题</strong></h3><p>这里有一点问题。如果表单的内容改变了，会发生什么？如果一个<code><input></code>在表单加载被添加到DOM中，会发生什么？</p><p>举个例子，我们把这个表单组件称为 <code>"MyForm"</code>，在 App 中，内容如下：</p><pre>// App.<a href="/tag-news-name-vue-p-1.html">vue</a>
<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.<a href="/tag-news-name-vue-p-1.html">vue</a>";
export default {
  name: "App",
  components: {
    MyForm: Form,
  },
  data: () => ({
    showInput: false,
  }),
};
</script></pre><p>当<code>App.<a href="/tag-news-name-vue-p-1.html">vue</a></code>通过条件来隐藏显示某些 <code>input</code>，我们的表单需要知道。在这种情况下，我们会想到在表单内容发生变化时跟踪其有效性，而不仅仅是在 <code>input</code> 事件或<code>mounted</code>生命周期钩子上。否则，可能会显示不正确的信息。</p><p>熟悉 <a href="/tag-news-name-Vue-p-1.html">Vue</a>的生命周期钩子小伙伴，这里可能会想到使用 <code>update</code> 来跟踪变化。理论上，这听起来不错。在实践中，它会创造一个无限的循环，然后浏览器挂了。</p><h3 id="item-3"><strong>解决方法</strong></h3><p>经过一番研究和测试，最佳解决方案是使用<code>MutationObserver</code> API。它是浏览器内置的方法，提供了监视对DOM树所做更改的能力，如果节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。</p><p>它是原生的方法，所以不受限于框架。</p><p>使用时，首先使用<code>MutationObserver</code>构造函数，新建一个观察器实例，同时指定这个实例的回调函数。在每次 DOM 变动后调用，这个回调都被调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，将我们的 <code>form</code> 组件改写成如下：</p><pre><template>
  <form :class="{ &#39;--invalid&#39;: 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><p>这里还需要使用 <code>beforeUnmount</code>生命周期事件来断开<code>observer</code>的连接，这会清除它所分配的任何内存。</p><p>最后，我们将<code>isInvalid</code>状态传递给要访问的内容的插件槽，这也称作用域的槽，它非常有用。</p><pre><template>
  <form :class="{ &#39;--invalid&#39;: 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><p>通过这样的设置，可以在我们的表单组件中添加任意数量的 <code>input</code>，并添加任何它需要的条件渲染逻辑。只要<code>input</code>使用HTML验证属性，表单就会跟踪它是否处于有效状态。</p><p>此外，由于使用的是作用域槽，我们将表单的状态提供给父级，所以父级可以对有效性的变化做出反应。</p><p>例如，在 <code>App.<a href="/tag-news-name-vue-p-1.html">vue</a></code>，我们想在表单无效时 "禁用" 提交按钮，可以这么来写</p><pre><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><p>nice~.</p><p>希望本文能对你未来的开必有所帮助。</p><p>（学习视频分享：web前端开发、编程基础视频）</p><p>以上就是如何监听<a href="/tag-news-name-Vue-p-1.html">Vue</a>的插槽变化？试试这一招！的详细内容，更多请关注www.sxiaw.com其它相关文章！</p></span>   
</div>
</article>
<aside class="swnetnews">
	
	<div class="lis">
		<span><i>前端 热点</i></span>
		<ul>
						<li><a href="/doc/8495.html" title="long double多少字节" target="_blank">long double多少字节</a></li><li><a href="/doc/2158.html" title="详细介绍XML中的DOCTYPE字段" target="_blank">详细介绍XML中的DOCTYPE字段</a></li><li><a href="/doc/549.html" title="Dom4j修改xml文档引入" target="_blank">Dom4j修改xml文档引入</a></li><li><a href="/doc/8244.html" title="vscode可以写什么" target="_blank">vscode可以写什么</a></li><li><a href="/doc/8817.html" title="照片保险箱app恢复文件的详细步骤" target="_blank">照片保险箱app恢复文件的详细步骤</a></li><li><a href="/doc/9221.html" title="Python 中当前时间表示方法详解" target="_blank">Python 中当前时间表示方法详解</a></li><li><a href="/doc/1263.html" title="如何将Python语言转化为Golang代码" target="_blank">如何将Python语言转化为Golang代码</a></li><li><a href="/doc/10113.html" title="PHP网站常见一些安全漏洞及防御方法" target="_blank">PHP网站常见一些安全漏洞及防御方法</a></li><li><a href="/doc/9046.html" title="编写PHP MVC框架【保姆级教程推荐】" target="_blank">编写PHP MVC框架【保姆级教程推荐】</a></li><li><a href="/doc/7012.html" title="Phalcon在Windows上安装 《Phalcon入坑指南系列 一》" target="_blank">Phalcon在Windows上安装 《Phalcon入坑指南系列 一》</a></li><li><a href="/doc/6363.html" title="详解PHP怎么实现链表" target="_blank">详解PHP怎么实现链表</a></li><li><a href="/doc/6016.html" title="php中的“克隆羊”" target="_blank">php中的“克隆羊”</a></li><li><a href="/doc/4433.html" title="一文读懂php设计模式之代理模式" target="_blank">一文读懂php设计模式之代理模式</a></li><li><a href="/doc/3634.html" title="PHP预定义接口之Iterator用法示例" target="_blank">PHP预定义接口之Iterator用法示例</a></li><li><a href="/doc/3410.html" title="php中的绘图技术详解" target="_blank">php中的绘图技术详解</a></li><li><a href="/doc/3337.html" title="oracle 怎么查询表字段" target="_blank">oracle 怎么查询表字段</a></li>					</ul>
	</div>
</aside>

</main>

  <script>
// first, find all the div.code blocks
document.querySelectorAll('pre').forEach(el => {
  // then highlight each
  hljs.highlightElement(el);
  hljs.lineNumbersBlock(el);
});


</script> 

  

<div id="footer">
        <div class="w1200">
                   
            <p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p>
            <p class="tips_text">Copyright © 2004-2018 https://m.sxiaw.com/. All Rights Reserved.<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?716b3e81948f3acc7a5d3e276a92f5a9";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
 <a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p>
		
        </div>
 </div>
 
  
 </body>
</html>