使用vue怎么實(shí)現(xiàn)父子組件間的傳值-創(chuàng)新互聯(lián)

使用vue怎么實(shí)現(xiàn)父子組件間的傳值？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比梅里斯網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式梅里斯網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋梅里斯地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1"></counter>
  <counter :count="count2"></counter>
</div>
<script>
  Vue.component("counter", {
    props:['count'],
    data(){
      return{
        number: this.count,
      }
    },
    template: `
      <p>{{count}} {{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
    }
  })
</script>
</body>
</html>

結(jié)果如下：

使用vue怎么實(shí)現(xiàn)父子組件間的傳值

上面的代碼中我們定義了一個(gè) counter 組件，并在 HTML 內(nèi)插入了兩次，分別通過(guò) :count = "" 的方式將父組件內(nèi)的 count1 和 count2 傳入，然后我們?cè)?counter 組件內(nèi)通過(guò) props 屬性將 count 屬性接住，這樣我們就將父組件的值傳遞給了子組件。我們就可以在 template 的模板中將傳過(guò)來(lái)的 count 數(shù)據(jù)插入，我們也可以在子組件的 data 內(nèi)將傳過(guò)來(lái)的 count 值賦值給一個(gè)新的變量 number。

如果從父組件傳過(guò)來(lái)的值需要參與邏輯運(yùn)算時(shí)我們推薦將傳入的值重新賦值給一個(gè)變量，因?yàn)樽咏M件不允許直接修改父組件傳過(guò)來(lái)的值，我們可以將傳入的值賦值給新的變量，然后將該變量再傳給父組件來(lái)修改父組件的值。如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange"></counter>
  <counter :count="count2" @change="handleChange"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change', 1)
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange(number) {
        this.total = this.total + number
      }
    }
  })
</script>
</body>
</html>

在以上代碼中，我們?cè)诟附M件中定義了一個(gè) total 數(shù)據(jù)，初始值為 count1 + count2 的和。我們?cè)谧咏M件內(nèi)定義了一個(gè) handleClick() 的方法，讓父組件傳過(guò)來(lái)的 count 值每次都 +1，我們還在 handleClick() 的方法內(nèi)定義了 this.emit( ′ change ′ ,1)的方法，它的意思是子組件通過(guò) emit(′change′,1)的方法，它的意思是子組件通過(guò)emit 屬性向外觸發(fā)一個(gè) change 事件，并且攜帶了一個(gè)參數(shù) 1，然后我們?cè)?HTML 的 <counter> 標(biāo)簽內(nèi)在父組件的 methods 屬性內(nèi)通過(guò) handleChange() 方法監(jiān)聽(tīng)這個(gè) change 事件，即 @change 和 $emit 的事件名稱自己定義，只要名稱一致即可。在 handleChange() 方法內(nèi)接收從子組件通過(guò) change 事件傳過(guò)來(lái)的參數(shù) 1，讓后讓 total 數(shù)據(jù)加上這個(gè)參數(shù) 1 即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單的累加計(jì)算。

以上便是子組件向父組件傳值的過(guò)程，結(jié)果如下：

使用vue怎么實(shí)現(xiàn)父子組件間的傳值

從上面的例子我們已經(jīng)實(shí)現(xiàn)了父子組件間的相互傳值，是通過(guò) change 事件將每次累加的數(shù)值 1 傳給父組件，通過(guò)數(shù)據(jù)的方式修改 total 值，Vue 官方建議我們盡量通過(guò)數(shù)據(jù)的方式而不是操作 DOM 的方式來(lái)實(shí)現(xiàn)操作，但是在極端條件下我們必須要操作 DOM 來(lái)實(shí)現(xiàn)，Vue 也為我們提供操作 DOM 的方法，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange" ref="one"></counter>
  <counter :count="count2" @change="handleChange" ref="two"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change')
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange() {
        console.log(this.$refs.one);
        console.log(this.$refs.two);
        this.total = this.$refs.one.number + this.$refs.two.number;
      }
    }
  })
</script>
</body>
</html>

上面的代碼中，我們并沒(méi)有通過(guò) $emit 里的 change 事件傳值給父組件，而是在 <coute> 標(biāo)簽內(nèi)分別定義了 ref="one" 和 ref="two" 屬性，并且在 handleChange() 方法內(nèi)通過(guò)監(jiān)聽(tīng)子組件的 change 改變時(shí)打印一下這兩個(gè) ref 內(nèi)的值，控制臺(tái)的輸出日志如下：

使用vue怎么實(shí)現(xiàn)父子組件間的傳值

里面既包含了 $el 的 DOM，還有初始值 count=1 即handleClick() 方法執(zhí)行后 number=2 的值，所以我們可以拿到 number 的值，讓兩個(gè) number 相加即為 total 的值。

在 vue 中我們還是建議通過(guò)數(shù)據(jù)來(lái)操作而不是通過(guò) DOM 來(lái)執(zhí)行操作。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：使用vue怎么實(shí)現(xiàn)父子組件間的傳值-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://muchs.cn/article20/coesjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、關(guān)鍵詞優(yōu)化、網(wǎng)站營(yíng)銷、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、商城網(wǎng)站

聲明：本網(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)

猜你還喜歡下面的內(nèi)容