Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)

更新時(shí)間：2023年06月21日 09:33:34 作者：開發(fā)運(yùn)維玄德公

這篇文章主要為大家介紹了Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 監(jiān)聽子組件觸發(fā)的事件（v-on）

說明

父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽子組件觸發(fā)的事件

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div id="counter-event-example">
      <p>蜀國(guó)新兵：{{ total }} 萬(wàn)</p>
      <!-- 打印三個(gè)按鈕，每個(gè)綁定 "incrementTotal"以計(jì)算total值 -->
      <button-counter v-on:increment="incrementTotal"></button-counter> 漢中招兵<br>
      <button-counter v-on:increment="incrementTotal"></button-counter> 益州招兵<br>
      <button-counter v-on:increment="incrementTotal"></button-counter> 蜀郡招兵<br>
    </div>
  </div>
  <script>
    // 注冊(cè)組件
    Vue.component('button-counter', {
      //綁定incrementHandler函數(shù)以計(jì)算counter值，在按鈕中打印counter值
      template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      //為組件提供 counter的計(jì)算
      methods: {
        incrementHandler: function () {
          this.counter += 1
          //子組件中使用$emit方法調(diào)用該事件并傳參
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
  </script>
</body>
</html>

結(jié)果顯示

2. 雙向綁定prop和子組件數(shù)據(jù)（v-model）

說明

組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <we-input v-model="num"></we-input>
    <p>輸入的數(shù)字為:{{num}}</p>
  </div>
  <script>
    Vue.component('we-input', {
      template: `
    <p>
      <input
       ref="input"
       :value="value" 
       @input="$emit('input', $event.target.value)"
      >
    </p>
    `,
      props: ['value'],
    })
    new Vue({
      el: '#app',
      data: {
        num: 100,
      }
    })
  </script>
</body>
</html>

說明：

ref="input"：獲取input的值
:value="value" ：
即v-bind:value 單向綁定data中的數(shù)據(jù)到input上（給input一個(gè)初始值，之后input改變，data不會(huì)跟隨改變。）
@input="$emit('input', $event.target.value)"：
讓父組件監(jiān)聽到自定義事件 $emit( eventName, […args] )

結(jié)果顯示