溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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
console.log(event)
}
}
})
</script>
</html>
以上是Vue組件如何修改根實例的數據的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
