Vue組件如何修改根實(shí)例的數(shù)據(jù)

這篇文章主要介紹Vue組件如何修改根實(shí)例的數(shù)據(jù)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站2013年開(kāi)創(chuàng)至今，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元金川做網(wǎng)站,已為上家服務(wù),為金川各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

思路：
1 在組件內(nèi)部監(jiān)聽(tīng)事件并把事件 emit
2 在組件上監(jiān)聽(tīng) emit 出來(lái)的事件
3 當(dāng)事件發(fā)生時(shí)執(zhí)行對(duì)應(yīng)的函數(shù)去修改根實(shí)例上的 data

實(shí)現(xiàn)：
1 在組件內(nèi)部的 input框 中監(jiān)聽(tīng) input事件，并給 input事件 綁定    
 triggerInput函數(shù)
2 當(dāng)往 input框 中輸入內(nèi)容時(shí)，觸發(fā) triggerInput 函數(shù)
 triggerInput函數(shù) 向外部 emit 一個(gè) edit事件 和 輸入框的值
3 在組件上監(jiān)聽(tīng)這個(gè) edit事件 并給 edit事件 綁定 triggerEdit函數(shù)
4 此時(shí)會(huì)觸發(fā) triggerEdit函數(shù)，triggerEdit函數(shù) 就能去修改根實(shí)例上的 data

注意：
1 triggerEdit函數(shù) 的第一個(gè)參數(shù)為你想要修改的根實(shí)例 data 的 key
2 第二個(gè)參數(shù) $event 是套路，有這個(gè)參數(shù)才能在 triggerEdit函數(shù) 中獲取
 組件內(nèi)部 emit 出來(lái)的 input框的值
3 可以在 triggerEdit函數(shù)中 log 出組件內(nèi)部發(fā)生的 event

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      根實(shí)例的 data message：{{message}}
      <br>
      根實(shí)例的 data name：{{name}}
      <br>
      message:
      <component-demo1
        v-on:edit="triggerEdit('message', $event)"
      ></component-demo1>
      name:
      <component-demo1
        v-on:edit="triggerEdit('name', $event)"
      ></component-demo1>
    </div>
  </body>
  <script>
    Vue.component('component-demo1', {
      template: `
        <div>
          組件內(nèi)的 input：
          <input
            v-on:input='triggerInput'
          >
        </div>
      `,
      methods: {
        triggerInput: function (e) {
          this.$emit('edit', e.target.value)
        },
      },
    })
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue',
        name: 'gua',
      },
      methods: {
        triggerEdit: function (key, value) {
          this[key] = value
          console.log(event)
        }
      }
    })
  </script>
</html>

Vue組件如何修改根實(shí)例的數(shù)據(jù)

以上是Vue組件如何修改根實(shí)例的數(shù)據(jù)的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：Vue組件如何修改根實(shí)例的數(shù)據(jù)
文章源于：http://muchs.cn/article10/gcicgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、Google、動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站