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>