亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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 來監(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>蜀國新兵:{{ total }} 萬</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>
    // 注冊組件
    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é)果顯示

以上就是Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)的詳細(xì)內(nèi)容,更多關(guān)于Vue監(jiān)聽綁定子組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論