用这招监听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>
            <br>
            网页题目：用这招监听Vue的插槽变化            <br>
            转载源于：<a href="http://www.zsjierui.cn/article/djjodii.html">http://www.zsjierui.cn/article/djjodii.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/cohoddd.html">租用哥斯达黎加服务器如何选择IDC公司？</a>
                </li><li>
                    <a href="/article/cohodci.html">编程Linux下的单片机编程技术突破（linux下的单片机）</a>
                </li><li>
                    <a href="/article/cohoohe.html">入门指南：如何配置DNS服务器？(dns服务器配置)</a>
                </li><li>
                    <a href="/article/cohodcd.html">Flex4新特性之SWFObject与HTMLTemplate</a>
                </li><li>
                    <a href="/article/cohoogo.html">windows7锁定任务栏灰色点不了？windows7无法锁定任务栏程序</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站建设与品牌策划方案报价</p>
            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上美图齐众。</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。">

提交需求

联系我们

028-86922220

手机：13518219792
地址：成都市太升南路288号锦天国际A幢1002号
24小时服务热线：028-86922220

网站建设服务

网页设计
网站制作
网站开发

网站推广服务

营销网站建设
百度快速排名
整站网站推广

网站运维服务

基础维护
网站改版
网站维护

微信二维码

微信二维码

友情链接：成都光华机房双流网站建设营销网站定位草坪音箱成都广告招牌成都商城网站建设公司成都网站推广背发光字网站改版维护成都会议展览设计

网站建设知识

用这招监听Vue的插槽变化

开始

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US