Vue 組件修改根實例的數據的方法

2019-11-19 11:54:33

字體：大中小

來源：轉載

供稿：網友

思路：

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

<!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">  根實例的 data message：{{message}}  <br>  根實例的 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>   組件內的 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  }  } }) </script></html>