用这招监听Vue的插槽变化

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

公司主营业务：网站设计制作、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出陵城免费做网站回馈大家。

下面的代码片段是以Options API格式编写的，但除了指定的地方外可以在Vue2 和 Vue2中使用。

开始

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

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

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

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

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

等）上时就会被触发。</p><p>任何时候在这个组件的<slot>中触发input事件，表单将捕获该事件。</p>
<pre>
 
 
 
 <ol>
  
  
  
  <li><template> </li>
  
  
  
  <li>  <form :class="{ '--invalid': isInvalid }" @input="validate"> </li>
  
  
  
  <li>    <slot /> </li>
  
  
  
  <li>  </form> </li>
  
  
  
  <li></template> </li>
  
  
  
  <li> </li>
  
  
  
  <li><script> </li>
  
  
  
  <li>export default { </li>
  
  
  
  <li>  data: () => ({ </li>
  
  
  
  <li>    isInvalid: false, </li>
  
  
  
  <li>  }), </li>
  
  
  
  <li>  methods: { </li>
  
  
  
  <li>    validate() { </li>
  
  
  
  <li>      // 验证逻辑 </li>
  
  
  
  <li>    } </li>
  
  
  
  <li>  } </li>
  
  
  
  <li>}; </li>
  
  
  
  <li></script> </li>
 
 
 
 </ol></pre><p>验证逻辑可以是简单或复杂的。本文为了演示，用简单的方法，使用form.checkValidity() API 来查看表单是否基于HTML验证属性而有效。</p><p>为了访问<form>元素。可以用refs或$el属性。为了简单起见，本文使用$el。</p>
<pre>
 
 
 
 <ol>
  
  
  
  <li><template> </li>
  
  
  
  <li>  <form :class="{ '--invalid': isInvalid }" @input="validate"> </li>
  
  
  
  <li>    <slot /> </li>
  
  
  
  <li>  </form> </li>
  
  
  
  <li></template> </li>
  
  
  
  <li> </li>
  
  
  
  <li><script> </li>
  
  
  
  <li>export default { </li>
  
  
  
  <li>  data: () => ({ </li>
  
  
  
  <li>    isInvalid: false, </li>
  
  
  
  <li>  }), </li>
  
  
  
  <li>  methods: { </li>
  
  
  
  <li>    validate() { </li>
  
  
  
  <li>      this.isInvalid = !this.$el.checkValidity() </li>
  
  
  
  <li>    } </li>
  
  
  
  <li>  } </li>
  
  
  
  <li>}; </li>
  
  
  
  <li></script> </li>
 
 
 
 </ol></pre>
<h3>问题</h3>
<p>这里有一点问题。如果表单的内容改变了，会发生什么?如果一个<input>在表单加载被添加到DOM中，会发生什么?</p><p>举个例子，我们把这个表单组件称为 "MyForm"，在 App 中，内容如下：</p>
<pre>
 
 
 
 <ol>
  
  
  
  <li>// App.vue </li>
  
  
  
  <li><template> </li>
  
  
  
  <li>  <MyForm> </li>
  
  
  
  <li>    <input </li>
  
  
  
  <li>      v-model="showInput" </li>
  
  
  
  <li>      id="toggle-name" </li>
  
  
  
  <li>      name="toggle-name" </li>
  
  
  
  <li>      type="checkbox" </li>
  
  
  
  <li>    /> </li>
  
  
  
  <li>    <label for="toggle-name">显示其它 input</label>  </li>
  
  
  
  <li> </li>
  
  
  
  <li>    <template v-if="showInput"> </li>
  
  
  
  <li>      <label for="name">Name:</label> </li>
  
  
  
  <li>      <input id="name" name="name" required /> </li>
  
  
  
  <li>    </template> </li>
  
  
  
  <li> </li>
  
  
  
  <li>    <button type="submit">提交</button> </li>
  
  
  
  <li>  </MyForm> </li>
  
  
  
  <li></template> </li>
  
  
  
  <li> </li>
  
  
  
  <li><script> </li>
  
  
  
  <li>import Form from "./components/form.vue"; </li>
  
  
  
  <li>export default { </li>
  
  
  
  <li>  name: "App", </li>
  
  
  
  <li>  components: { </li>
  
  
  
  <li>    MyForm: Form, </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>  data: () => ({ </li>
  
  
  
  <li>    showInput: false, </li>
  
  
  
  <li>  }), </li>
  
  
  
  <li>}; </li>
  
  
  
  <li></script> </li>
 
 
 
 </ol></pre><p>当App.vue通过条件来隐藏显示某些 input，我们的表单需要知道。在这种情况下，我们会想到在表单内容发生变化时跟踪其有效性，而不仅仅是在 input 事件或mounted生命周期钩子上。否则，可能会显示不正确的信息。</p><p>熟悉 Vue的生命周期钩子小伙伴，这里可能会想到使用 update 来跟踪变化。理论上，这听起来不错。在实践中，它会创造一个无限的循环，然后浏览器挂了。</p>
<h3>解决方法</h3>
<p>经过一番研究和测试，最佳解决方案是使用MutationObserver API。它是浏览器内置的方法，提供了监视对DOM树所做更改的能力，如果节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。</p><p>它是原生的方法，所以不受限于框架。</p><p>使用时，首先使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。在每次 DOM 变动后调用，这个回调都被调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，将我们的 form 组件改写成如下：</p>
<pre>
 
 
 
 <ol>
  
  
  
  <li><template> </li>
  
  
  
  <li>  <form :class="{ '--invalid': isInvalid }" @input="validate"> </li>
  
  
  
  <li>    <slot /> </li>
  
  
  
  <li>  </form> </li>
  
  
  
  <li></template> </li>
  
  
  
  <li> </li>
  
  
  
  <li><script> </li>
  
  
  
  <li>export default { </li>
  
  
  
  <li>  data: () => ({ </li>
  
  
  
  <li>    isInvalid: false, </li>
  
  
  
  <li>  }), </li>
  
  
  
  <li>  mounted() { </li>
  
  
  
  <li>    const observer = new MutationObserver(this.validate); </li>
  
  
  
  <li>    observer.observe(this.$el, { </li>
  
  
  
  <li>      childList: true, </li>
  
  
  
  <li>      subtree: true, </li>
  
  
  
  <li>    }); </li>
  
  
  
  <li>    this.observer = observer; </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>  methods: { </li>
  
  
  
  <li>    validate() { </li>
  
  
  
  <li>      this.isInvalid = !this.$el.checkValidity(); </li>
  
  
  
  <li>    }, </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>  beforeUnmount() { </li>
  
  
  
  <li>    this.observer.disconnect(); </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>}; </li>
  
  
  
  <li></script> </li>
  
  
  
  <li> </li>
  
  
  
  <li> </li>
  
  
  
  <li><style scoped> </li>
  
  
  
  <li></style> </li>
 
 
 
 </ol></pre><p>这里还需要使用 beforeUnmount生命周期事件来断开observer的连接，这会清除它所分配的任何内存。</p><p>最后，我们将isInvalid状态传递给要访问的内容的插件槽，这也称作用域的槽，它非常有用。</p>
<pre>
 
 
 
 <ol>
  
  
  
  <li><template> </li>
  
  
  
  <li>  <form :class="{ '--invalid': isInvalid }" @input="validate"> </li>
  
  
  
  <li>    <slot v-bind="{ isInvalid }" /> </li>
  
  
  
  <li>  </form> </li>
  
  
  
  <li></template> </li>
  
  
  
  <li> </li>
  
  
  
  <li><script> </li>
  
  
  
  <li>export default { </li>
  
  
  
  <li>  data: () => ({ </li>
  
  
  
  <li>    isInvalid: false, </li>
  
  
  
  <li>  }), </li>
  
  
  
  <li>  mounted() { </li>
  
  
  
  <li>    const observer = new MutationObserver(this.validate); </li>
  
  
  
  <li>    observer.observe(this.$el, { </li>
  
  
  
  <li>      childList: true, </li>
  
  
  
  <li>      subtree: true, </li>
  
  
  
  <li>    }); </li>
  
  
  
  <li>    this.observer = observer; </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>  methods: { </li>
  
  
  
  <li>    validate() { </li>
  
  
  
  <li>      this.isInvalid = !this.$el.checkValidity(); </li>
  
  
  
  <li>    }, </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>  beforeUnmount() { </li>
  
  
  
  <li>    this.observer.disconnect(); </li>
  
  
  
  <li>  }, </li>
  
  
  
  <li>}; </li>
  
  
  
  <li></script> </li>
 
 
 
 </ol></pre><p>通过这样的设置，可以在我们的表单组件中添加任意数量的 input，并添加任何它需要的条件渲染逻辑。只要input使用HTML验证属性，表单就会跟踪它是否处于有效状态。</p><p>此外，由于使用的是作用域槽，我们将表单的状态提供给父级，所以父级可以对有效性的变化做出反应。</p><p>例如，在 App.vue，我们想在表单无效时 "禁用" 提交按钮，可以这么来写</p>
<pre>
 
 
 
 <ol>
  
  
  
  <li><template> </li>
  
  
  
  <li>  <MyForm> </li>
  
  
  
  <li>    <template slot:default="form"> </li>
  
  
  
  <li>      <label for="name">Name:</label> </li>
  
  
  
  <li>      <input id="name" name="name" required> </li>
  
  
  
  <li> </li>
  
  
  
  <li>      <button </li>
  
  
  
  <li>        type="submit" </li>
  
  
  
  <li>        :class="{ disabled: form.isInvalid }" </li>
  
  
  
  <li>      > </li>
  
  
  
  <li>        Submit </li>
  
  
  
  <li>      </button> </li>
  
  
  
  <li>    </template> </li>
  
  
  
  <li>  </MyForm> </li>
  
  
  
  <li></template> </li>
 
 
 
 </ol></pre><p>nice~.</p><p>希望本文能对你未来的开必有所帮助。</p><p>
            <p>
                本文题目：<a href="http://www.shufengxianlan.com/qtweb/news8/124458.html">用这招监听Vue的插槽变化</a>
                <br>
                网址分享：<a href="http://www.shufengxianlan.com/qtweb/news8/124458.html">http://www.shufengxianlan.com/qtweb/news8/124458.html</a>
            </p>
            <p>
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                </p>
            <p class="adpic">
                <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a>
                <a href="" target="_blank" class="adimg"><img src=""></a>
            </p>
            <p class="copy">
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                <a href="https://www.cdcxhl.com/" target="_blank">创新互联</a>
            </p>
        </div>
        <div class="newsmorelb">
            <p>猜你还喜欢下面的内容</p>
            <ul>
                <li>
                        <a href="/qtweb/news7/124457.html">虚拟桌宠模拟器怎么设置中文？（虚拟主机不支持中文怎么解决）</a>
                    </li><li>
                        <a href="/qtweb/news6/124456.html">香港服务器限制吗</a>
                    </li><li>
                        <a href="/qtweb/news5/124455.html">datediff详细参数？（SQLServerDATEDIFF函数的用法是什么）</a>
                    </li><li>
                        <a href="/qtweb/news4/124454.html">vps数据库密码忘了怎么办</a>
                    </li><li>
                        <a href="/qtweb/news3/124453.html">跨境电商是干嘛的</a>
                    </li><li>
                        <a href="/qtweb/news2/124452.html">云服务器如何看公网ip</a>
                    </li><li>
                        <a href="/qtweb/news1/124451.html">Linux源码精要：PDF详解（linux源码pdf）</a>
                    </li><li>
                        <a href="/qtweb/news0/124450.html">电脑一下载东西就断网怎么回事？机房的服务器经常断线</a>
                    </li><li>
                        <a href="/qtweb/news49/124449.html">PHP字符串替换函数strtr()的功能实现讲解</a>
                    </li>                            </ul>
        </div>
    </div>
    <div class="col-lg-3 noneb">
        <div class="bkright" style="margin-top: 0">
            <p><a href="https://www.cdcxhl.com/news/ymzc/">域名注册知识</a></p>
            <ul>
                <li>
                        <a class="text_overflow" href="/qtweb/news2/243852.html">Silverlight兼容可能存在缺陷</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news8/400058.html">什么会影响香港服务器稳定性（什么会影响香港服务器稳定性呢）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news18/410518.html">MySQL系统变量应用探究</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news17/309067.html"> Docker容器：一个轻量级的Linux运行环境 </a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news16/150766.html">homegroupuser是什么账号？（windows10homegroup）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news36/369436.html">国内免费vps主机使用怎么加速</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news37/376387.html">租用ddos云防护服务器的优势是什么</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news40/19290.html">如何读取没有换行的 SQL 数据库数据？ (从sql数据库读取没换行)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news34/85234.html">上海云计算公司排名？（云服务应用在哪些企业）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news24/105224.html">Linux下的软件下载命令：简单易学，方便快捷！(linux下载软件命令)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news28/25528.html">read的报错修复下</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news22/278122.html">网站备案的主体变更怎么做？(备案怎么变更主体信息呢)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news45/185145.html">邮箱监控有什么用途,什么是邮箱监控的</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news7/530607.html">Nginx指令:worker_rlimit_nofile（工作进程文件限制）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news1/472201.html">IP攻击怎么防止？(怎么防止ip攻击网络)</a>
                    </li>            </ul>
        </div>
        <div class="bkright tag">
            <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">分类信息网站</a></p>
            <ul>
                <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/muwu/" target="_blank">木屋</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/qchs/" target="_blank">报废汽车回收</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/fwqtg/" target="_blank">服务器托管</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbc/" target="_blank">混凝土搅拌罐车</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/mutuopan/" target="_blank">木托盘</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/suliaodai/" target="_blank">塑料袋</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/chalousj/" target="_blank">茶楼设计</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/qzgqb/" target="_blank">轻质隔墙板</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/loutihulan/" target="_blank">楼梯护栏</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/shipaifang/" target="_blank">石牌坊</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/tadiaozulin/" target="_blank">塔吊租赁</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/jizhuangxiang/" target="_blank">集装箱</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/jiagu/" target="_blank">加固</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/chunshuiji/" target="_blank">纯水机</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/zhixiang/" target="_blank">纸箱</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/cantingsj/" target="_blank">餐厅设计</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<div class="carousel-inner linkbg" style="background: #fff">
    <div class="container">
        <a href="https://www.cdcxhl.com/link/" target="_blank">买友情链接</a>　　 　<a href="https://www.cdcxhl.com/app.html" target="_blank">app软件开发公司</a>　　 　<a href="https://www.scvps.cn/services/ssl/" target="_blank">SSL证书</a>　　 　<a href="http://www.pxwzjz.com/" target="_blank">蓬溪网站建设</a>　　 　<a href="http://www.wjzwz.com/" target="_blank">温江做网站</a>　　 　<a href="http://www.cdkjz.cn/wangzhan/yunying/" target="_blank">成都网站代运营</a>　　 　<a href="https://www.cdxwcx.com/wangzhan/" target="_blank">成都网站建设</a>　　 　<a href="http://www.nengjingkeji.cn/" target="_blank">成都能净科技</a>　　 　<a href="http://m.cdcxhl.cn/applets/
" target="_blank">小程序开发公司</a>　　 　<a href="http://www.nzanhua.com/" target="_blank">雕琢时光茶叶</a>　　 　<a href="http://www.cdxwcx.cn/tuoguan/yaan.html" target="_blank">雅安机房托管</a>　　 　<a href="http://chengdu.cdcxhl.com/xcx/" target="_blank">成都微信小程序开发</a>　　 　<a href="https://www.cdcxhl.com/tuoguan.html" target="_blank">成都主机托管</a>　　 　<a href="http://www.zsjierui.cn/" target="_blank">资阳网站建设</a>　　 　<a href="http://www.sxpndq.cn/" target="_blank">普能电气</a>　　 　<a href="http://www.cdhuace.com/zhangui.html" target="_blank">成都展柜设计公司</a>　　 　<a href="http://www.hyruijie.cn/" target="_blank">泸州洋跃建站</a>　　 　<a href="https://www.xwcx.net/" target="_blank">主机托管</a>　　 　<a href="http://www.cdxwcx.cn/tuoguan/deyang.html" target="_blank">德阳机房托管</a>　　 　<a href="https://www.cdcxhl.com/idc/yaan.html" target="_blank">雅安托管服务器</a>　　 　    </div>
</div>
<footer>
    <div class="carousel-inner footjz">

<div class="container">
            <i class="icon iconfont zbw"></i>
            高品质定制 <i class="icon iconfont"></i>
            跨终端自动兼容 <i class="icon iconfont"></i>
            节约开发成本  <i class="icon iconfont"></i>
            开发周期短 <i class="icon iconfont"></i>
            一体化服务
            <button  type="button" class="btn  btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button>
            <button  type="button" class="btn  btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button>
        </div>
    </div>
    <div class="carousel-inner bqsy">
        <div class="container">
            <div class="lxfs">
                <h4 class="yutelnone">028-86922220 13518219792</h4>
                <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4>

<a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a>
                <div class="dz">创新互联建站专注：
                        <a href="https://www.cdcxhl.com/" target="_blank">网站设计</a>
                        <a href="https://www.cdcxhl.com/" target="_blank">网站制作</a>
                        <a href="https://www.cdcxhl.com/" target="_blank">网站建设</a>
                    <address>地址：成都太升南路288号锦天国际A幢10楼</address>
                </div>
            </div>
            <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联">
                <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br>
                    Tel：400-028-6601（7x24h）</p></div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
      $.getJSON ("../../qtwebpic.txt", function (data) {
        var jsonContent = {
            "featured":data
        }
        var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)];
        $(".adpic .adimg").attr("href",random.link)
        $(".adpic img").attr("src",random.pic);
    })
</script>