用这招监听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.csdahua.cn/qtweb/news8/124458.html">用这招监听Vue的插槽变化</a>
                <br>
                分享网址：<a href="http://www.csdahua.cn/qtweb/news8/124458.html">http://www.csdahua.cn/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="http://www.csdahua.cn/" 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/dianzishangwu/">电子商务知识</a></p>
            <ul>
                <li>
                        <a class="text_overflow" href="/qtweb/news48/495748.html">俄乌战争网络战中新发现第二个数据擦除器“IsaacWiper”针对乌克兰</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news45/437295.html">如何选择适合云服务器的操作系统？（vps怎么选择系统好）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news35/185935.html">查找表的存储及运算c_查找维度表</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news41/425441.html">html如何转excel表格</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news9/502109.html">OA办公系统无法打开，其他网页都能正常打开，这是为什么？（网站无法打开有的电脑可以打开）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news20/96220.html">htmlinput属性的用法是什么</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news46/5996.html">10m带宽可以在线多少人？（服务器下载人数与带宽）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news41/551941.html">东莞小程序开发需要了解哪些技能,东莞小程序开发企业*</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news37/352137.html">提示windows无法格式化怎么解决？（sd在windows无法格式化）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news10/4460.html">web服务器分类?（web服务器分类)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news18/286568.html">阿里云二级域名申请ssl证书</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news21/542471.html">哈尔滨域名注册机构如何选择？</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news41/123541.html">微信直播电脑不显示画面怎么办？(微盟直播回看是黑屏怎么办呢)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news15/395065.html">红色的优质Redis标准版（redis标准版）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news33/473933.html">阿里巴巴云客服哪个部门好？（阿里巴巴云服务器客服）</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/zaomaoji/" 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/blgds/" 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/xiaoguotu/" 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/shiliangting/" 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/iso/" target="_blank">iso认证</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbg/" 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/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/bengche/" 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/pe/" target="_blank">PE包装袋</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/zzdb/" 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/xiangsu/" 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/wsjgd/" 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/fwjd/" 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/yhjdsj/" target="_blank">宴会酒店设计</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<div class="carousel-inner linkbg" style="background: #fff">
    <div class="container">
        <a href="http://www.xhgfhy.com/
" target="_blank">犀浦封阳台</a>　　 　<a href="https://www.cdcxhl.com/koubei.html" target="_blank">成都口碑营销公司</a>　　 　<a href="https://www.cdxwcx.com/wangzhan/app.html" target="_blank">app软件开发</a>　　 　<a href="http://www.cdxswst.com/" target="_blank">成都康明斯发电机</a>　　 　<a href="https://www.cdcxhl.com/sosuo.html" target="_blank">搜索引擎优化</a>　　 　<a href="http://www.scyarui.cn/" target="_blank">青羊区雕琢时光</a>　　 　<a href="http://m.cdcxhl.cn/shop/
" target="_blank">商城网站建设公司</a>　　 　<a href="http://chengdu.xwcx.net/mobile/" target="_blank">移动手机网站制作</a>　　 　<a href="https://www.cdcxhl.com/" target="_blank">成都做网站</a>　　 　<a href="http://www.tvybhd.com/" target="_blank">水泥基自流平</a>　　 　<a href="https://www.cdcxhl.com/" target="_blank">建站公司</a>　　 　<a href="http://www.shganxi.cn/" target="_blank">簇桥薇薇新娘</a>　　 　<a href="http://chengdu.cdcxhl.cn/shop/
" target="_blank">成都商城网站建设</a>　　 　<a href="http://www.emts.com.cn/about/" target="_blank">东方电机技改服务有限公司</a>　　 　<a href="https://www.cdcxhl.com/sosuo.html" target="_blank">网站搜索引擎优化</a>　　 　<a href="http://www.cxjianzhan.com/seo/" target="_blank">seo关键词优化</a>　　 　<a href="http://www.cqcxhl.com/" target="_blank">网站设计</a>　　 　<a href="https://www.cdxwcx.com/city/luzhou/" target="_blank">泸州做网站</a>　　 　<a href="https://www.cdxwcx.com/wangzhan/dingzhi.html" target="_blank">成都定制网站</a>　　 　<a href="http://m.cdxwcx.com/" 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="http://www.csdahua.cn/" target="_blank">网站优化</a>
                        <a href="http://www.csdahua.cn/" target="_blank">网络推广</a>
                        <a href="http://www.csdahua.cn/" 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：028-86922220（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>