Vue元件修改根實例的資料方法（附程式碼）

這篇文章帶給大家的內容是關於Vue元件修改根實例的資料方法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

想法：
1 在元件內部監聽事件並把事件emit
2 在元件上監聽emit 出來的事件
3 當事件發生時執行對應的函數去修改根實例上的data

實作：
1 在元件內部的input框中監聽input事件，並給予input事件綁定   
 triggerInput函數
2 當輸入在input框中輸入內容時，觸發triggerInput 函數
 triggerInput函數向外部emit 一個edit事件和輸入框的值
3 在元件上監聽這個edit事件並給edit事件綁定triggerEdit函數
4 此時會觸發triggerEdit函數，triggerEdit函數就能去修改根實例上的data

注意：
1 triggerEdit函數的第一個參數為你想要修改的根實例data 的key
2 第二個參數$event 是套路，有這個參數才能在triggerEdit函數中取得
 元件內部emit 出來的input框的值
3 可以在triggerEdit函數中log 出元件內部發生的event

nbsp;html>

  
    <meta>
    <title></title>
    <script></script>
  
  
    <div>
      根实例的 data message：{{message}}
      <br>
      根实例的 data name：{{name}}
      <br>
      message:
      <component-demo1></component-demo1>
      name:
      <component-demo1></component-demo1>
    </div>
  
  <script>
    Vue.component(&#39;component-demo1&#39;, {
      template: `
        <div>
          组件内的 input：
          <input
            v-on:input=&#39;triggerInput&#39;
          >
        
      `,
      methods: {
        triggerInput: function (e) {
          this.$emit(&#39;edit&#39;, e.target.value)
        },
      },
    })
    var app = new Vue({
      el: &#39;#app&#39;,
      data: {
        message: &#39;hello vue&#39;,
        name: &#39;gua&#39;,
      },
      methods: {
        triggerEdit: function (key, value) {
          this[key] = value
          console.log(event)
        }
      }
    })
  </script>

【相關推薦：JavaScript影片教學】

#

以上是Vue元件修改根實例的資料方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！