vue中怎么利用v-model指令實現(xiàn)父子組件通信

本篇文章給大家分享的是有關(guān)vue中怎么利用v-model指令實現(xiàn)父子組件通信，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，有關(guān)成都定制網(wǎng)頁設(shè)計方案、改版、費用等問題，行業(yè)涉及玻璃鋼雕塑等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認可。

vue的雙向數(shù)據(jù)綁定

v-model這個指令只能用在, 這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會相應(yīng)的更新為相同的數(shù)據(jù)。</p><p>這個問題在很多前端面試中，會提及。面試官問你，vue的雙向數(shù)據(jù)綁定原理是什么？當(dāng)然，這個也是耳熟能詳?shù)膯栴}，百度隨便一搜索，到處都能找到答案。</p><p>一般都會搜索到，是用Object.defineProperty( ) ，來監(jiān)聽數(shù)據(jù)get和set，來實現(xiàn)數(shù)據(jù)劫持的。</p><p>假如對Object.defineProperty( )不是很了解，可以點擊上面鏈接，看看其語法！</p><p><strong>舉個簡單的例子：</strong></p><pre>var blog = { name: 'haorooms博客' }; console.log(blog.name); // haorooms博客</pre><p>如果想要在執(zhí)行<code>console.log(blog.name)</code>的同時，直接給haorooms博客加個書名號，那要怎么處理呢？或者說要通過什么監(jiān)聽對象 blog的屬性值。這時候<code>Object.defineProperty( )</code>就派上用場了，代碼如下：</p><pre>var blog= {} var name = ''; Object.defineProperty(blog, 'name', { set: function (value) { name = value; console.log('歡迎來到' + value); }, get: function () { return '《' + name + '》' } }) blog.name = 'haorooms博客'; // 歡迎來到haorooms博客 console.log(blog.name); // 《haorooms博客》</pre><p>上面代碼執(zhí)行一下，可以查看效果！</p><p>關(guān)于 vue的雙向數(shù)據(jù)綁定，具體如何實現(xiàn)的？網(wǎng)上也有很多實現(xiàn)的代碼，這里就不多累贅了！</p><p><strong>v-model 的使用</strong></p><p>上面開了一個小差，講了那么多，其實就是為了說明Vue 是單項數(shù)據(jù)流，v-model 只是語法糖而已。</p><pre><input v-model="haorooms" /> <input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" /></pre><p>第一行的代碼其實只是第二行的語法糖。然后第二行代碼還能簡寫成這樣：</p><pre><input :value="haorooms" @input="haorooms= $event.target.value" /></pre><p>也就是說，</p><pre><input v-model="haorooms" /></pre><p>也可以寫成</p><pre><input :value="haorooms" @input="haorooms= $event.target.value" /></pre><p><strong>v-model在組件上的使用</strong></p><p>回到我們一開始的疑問了？vue中v-model如何進行父子組件的通信？如何在組件中使用呢？假如你理解了我上面的例子，那么，我們就可以很簡單的在組件中使用v-model了。</p><p>父組件代碼如下：</p><pre> <template> <div id="demo"> <test-model v-model="haorooms"></test-model> <span>{{haorooms}}</span> </div> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ haorooms: "haorooms" } }, components: { testModel, } } </script> <style lang="scss" scoped> </style></pre><p>子組件代碼如下：</p><pre><template> <span> <input ref="input" :value="value" @input="$emit('balabala', $event.target.value)" > </span> </template> <script> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', event: 'balabala' } } </script> <style lang="scss" scoped> </style></pre><p>我們可以通過上面代碼，子組件修改父組件v-model綁定的值！</p><p>實現(xiàn)截圖如下：</p><p><img src="/upload/otherpic46/57795.gif" alt="vue中怎么利用v-model指令實現(xiàn)父子組件通信"></p><p><strong>v-model 的缺點和解決辦法</strong></p><p>在創(chuàng)建類似復(fù)選框或者單選框的常見組件時，v-model就不好用了。</p><pre><input type="checkbox" v-model="haorooms" /></pre><p>我們可以用如下方式解決：</p><pre><input type="checkbox" :checked="status" @change="status = $event.target.checked" /></pre><p>父組件可以如下寫：</p><pre><my-checkbox v-model="haorooms"></my-checkbox></pre><p>子組件：</p><pre><input type="checkbox"  @change="$emit('balabala', $event.target.checked)" :checked="value" /> export default { data(){ return{ } }, props: ['checked'], //這里就不用 value 了，而是 checked model: { prop: 'checked', event: 'balabala' }, }</pre><p>以上就是vue中怎么利用v-model指令實現(xiàn)父子組件通信，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。</p> <br> 網(wǎng)站標題：vue中怎么利用v-model指令實現(xiàn)父子組件通信 <br> 文章鏈接：<a href="http://weahome.cn/article/ihoipe.html">http://weahome.cn/article/ihoipe.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/pcccip.html">鼠標右鍵新建沒有word如何解決</a> </li><li> <a href="/article/pcccgh.html">javascript怎么調(diào)用后臺</a> </li><li> <a href="/article/pcccjo.html">MySQLunsigned屬性</a> </li><li> <a href="/article/pcccpc.html">怎么實現(xiàn)javaspring-boot-starter-mail發(fā)送郵件</a> </li><li> <a href="/article/pcccpd.html">Linux運維CentOS系統(tǒng)SVN雙備份Shell腳本的示例分析</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">手機網(wǎng)站制作</a><a target="_blank">H5網(wǎng)站制作</a><a target="_blank">手機網(wǎng)站制作</a><a target="_blank">手機網(wǎng)站制作</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">成都商城網(wǎng)站制作</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">成都網(wǎng)站維護</a><a target="_blank">注冊公司</a><a target="_blank">網(wǎng)站免費收錄</a><a target="_blank">免費建站模板</a><a target="_blank">免費建站</a><a target="_blank">鏈接買賣</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">達州網(wǎng)站建設(shè)</a><a target="_blank">響應(yīng)式網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站建設(shè)公司</a><a target="_blank">門戶網(wǎng)站建設(shè)方案</a><a target="_blank">企業(yè)網(wǎng)站建設(shè)</a><a target="_blank">電商網(wǎng)站建設(shè)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">綿陽主機托管</a><a target="_blank">成都光華機房</a><a target="_blank">貴陽聯(lián)通機房</a><a target="_blank">重慶移動機房托管</a><a target="_blank">雅安服務(wù)器托管</a><a target="_blank">綿陽機房租用</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國免費咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號錦天國際A幢1002號</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號</a></div>  </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計制作</a> <a target="_blank">重慶網(wǎng)頁設(shè)計</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">在線咨詢</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">電話咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">QQ咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">預(yù)約顧問</span> </a> </li> </ul> </div> <div id="squ6kqw" class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在線咨詢</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p> </a> </dt> </dl> </div> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="cc2oo" class="pl_css_ganrao" style="display: none;"><abbr id="cc2oo"></abbr><s id="cc2oo"></s><cite id="cc2oo"></cite><small id="cc2oo"><noframes id="cc2oo"><ul id="cc2oo"></ul></noframes></small><pre id="cc2oo"><wbr id="cc2oo"><cite id="cc2oo"></cite></wbr></pre><strike id="cc2oo"></strike><object id="cc2oo"></object><dd id="cc2oo"></dd><optgroup id="cc2oo"></optgroup><pre id="cc2oo"><blockquote id="cc2oo"><tfoot id="cc2oo"></tfoot></blockquote></pre><code id="cc2oo"></code><em id="cc2oo"></em><samp id="cc2oo"></samp><abbr id="cc2oo"></abbr><strike id="cc2oo"></strike><code id="cc2oo"></code><button id="cc2oo"><samp id="cc2oo"><tbody id="cc2oo"></tbody></samp></button><kbd id="cc2oo"><center id="cc2oo"><dd id="cc2oo"></dd></center></kbd><table id="cc2oo"><tr id="cc2oo"><pre id="cc2oo"></pre></tr></table><object id="cc2oo"></object><tr id="cc2oo"><sup id="cc2oo"><blockquote id="cc2oo"></blockquote></sup></tr><tbody id="cc2oo"></tbody><li id="cc2oo"></li><strike id="cc2oo"></strike><fieldset id="cc2oo"><optgroup id="cc2oo"><tbody id="cc2oo"></tbody></optgroup></fieldset><td id="cc2oo"><fieldset id="cc2oo"><optgroup id="cc2oo"></optgroup></fieldset></td><li id="cc2oo"></li><dfn id="cc2oo"><center id="cc2oo"><dl id="cc2oo"></dl></center></dfn><tfoot id="cc2oo"></tfoot><pre id="cc2oo"><dd id="cc2oo"><th id="cc2oo"></th></dd></pre><wbr id="cc2oo"></wbr><rt id="cc2oo"><code id="cc2oo"><table id="cc2oo"></table></code></rt><tfoot id="cc2oo"><object id="cc2oo"><small id="cc2oo"></small></object></tfoot><small id="cc2oo"></small><td id="cc2oo"><fieldset id="cc2oo"><optgroup id="cc2oo"></optgroup></fieldset></td><del id="cc2oo"></del><tfoot id="cc2oo"></tfoot><td id="cc2oo"></td><input id="cc2oo"></input><tr id="cc2oo"><sup id="cc2oo"><center id="cc2oo"></center></sup></tr><source id="cc2oo"></source><code id="cc2oo"><table id="cc2oo"><tr id="cc2oo"></tr></table></code><xmp id="cc2oo"></xmp><em id="cc2oo"></em><noframes id="cc2oo"></noframes><input id="cc2oo"></input><th id="cc2oo"><menu id="cc2oo"><noscript id="cc2oo"></noscript></menu></th><tr id="cc2oo"><sup id="cc2oo"><center id="cc2oo"></center></sup></tr><nav id="cc2oo"><li id="cc2oo"><acronym id="cc2oo"></acronym></li></nav><em id="cc2oo"></em></div> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>