Vue组件修改根实例数据的方法

思考：

1监听组件内部的事件并发出事件

2在组件上侦听来自emit的事件

3当事件发生时，执行相应的函数来修改根实例上的数据

实现：

1监听组件内部输入框中的输入事件，并将triggerInput函数绑定到输入事件

2将内容输入输入框时触发输入功能

triggerInput函数向外部发出编辑事件和输入框的值

3在组件上监听这个编辑事件，并将triggerEdit函数绑定到编辑事件

4此时触发triggerEdit函数，triggerEdit函数可以修改根实例上的数据

注意：

1 trigger dit函数的第一个参数是要修改的根实例数据的键

2第二个参数$event是一个例程。只有使用这个参数，才能在triggerEdit函数中获取组件发出的输入框的值。

3.您可以在triggerEdit函数中记录组件内部发生的事件

！DOCTYPE html html Head meta charset=' utf-8 ' title/title script src=' http :https://cdn . jsdeliver . net/NPM/vue/dist/vue . js '/script/Head body div id=data message of ' app '根实例：{{message}} brdataname of根实例：{ { name } } brmessage : component-demo 1v-: edit='触发了它(' message '，$event ')$ 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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。