溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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
<!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>
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。
看完上述內容，你們掌握使用Vue 組件怎么修改根實例的數據的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
