如何监听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>的插槽变化？试试这一招！的详细内容，更多请关注其它相关文章！</p></span>   
</div>
</article>
	<script type="text/javascript" src="/index.php?s=hits-show-id-51793-type-insert-sid-news" charset="utf-8"></script><aside class="swnetnews">
    
	
	<div class="lis">
	    
		<span><i>推荐内容</i></span>
		<ul>
						<li><a href="/doc/2664.html" title="使用Ruby和Nokogiri模拟爬虫导出RSS种子的实例详解" target="_blank">使用Ruby和Nokogiri模拟爬虫导出RSS种子的实例详解</a></li><li><a href="/doc/654.html" title="java操作properties配置文件" target="_blank">java操作properties配置文件</a></li><li><a href="/doc/5807.html" title="vscode如何预置代码" target="_blank">vscode如何预置代码</a></li><li><a href="/doc/5269.html" title="nginx服务器中phpmyadmin如何安装并配置" target="_blank">nginx服务器中phpmyadmin如何安装并配置</a></li><li><a href="/doc/69.html" title="html label标签的作用是什么？html label标签的用法方法详解" target="_blank">html label标签的作用是什么？html label标签的用法方法详解</a></li><li><a href="/doc/10306.html" title="Redis删除策略和逐出策略" target="_blank">Redis删除策略和逐出策略</a></li><li><a href="/doc/8802.html" title="php-cs-fixer大有用处！能自动修证代码风格~" target="_blank">php-cs-fixer大有用处！能自动修证代码风格~</a></li><li><a href="/doc/5885.html" title="带你一起解读Python多线程" target="_blank">带你一起解读Python多线程</a></li><li><a href="/doc/9970.html" title="redis密码管理介绍" target="_blank">redis密码管理介绍</a></li><li><a href="/doc/9395.html" title="redis集群搭建需要什么" target="_blank">redis集群搭建需要什么</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> 

   <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css">
 <script type="text/javascript" src="/kan/js/read.js"></script>

<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a  rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
 <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div>  -->


<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password"  value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
                <label class="ui-label"> </label>
                <label for="agreement" class="ui-label-checkbox">
                <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
                <input type="hidden" name="notforward" id="notforward" value="1">
                <input  type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>                           
       <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
  <p class="int-btn"><a rel="nofollow" id="loginbt"  class="loginbtn"><span>登录</span></a></p> 
  </form>
</div>




</div>



</div>

















</div>

</div>
 
<script type="text/javascript" src="/kan/js/foot_js.js"></script>   

<div id="footer">
        <div class="w1200">
                   
            <p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p>
            <p class="tips_text">Copyright © 2004-2018 https://www.sxiaw.com. All Rights Reserved.<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69";
  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><a href="https://sxiaw.com/gb-p-1.html"  target="_blank">问题反馈</a></p>
		    
        </div>
    </div>
 
  
 </body>
</html>