Vue 组件修改根实例的数据的方法
更新时间：2019年04月02日 08:20:41 作者：TaoWu
这篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vuex中store的action和mutations用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue3结合typescript中使用class封装axios
这篇文章主要为大家介绍了vue3结合typescript中使用class封装axios实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最近接了个小活,其中甲方要求把vue项目打包成exe安装在windows上,其中有也会出现一些小问题和优化,特此记录,这篇文章主要给大家介绍了关于将vue项目打包成电脑端应用.exe的完整步骤,需要的朋友可以参考下2023-10-10
工作中日常笔记,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面这篇文章主要给大家介绍了关于vue3中使用swiper的完整版教程,需要的朋友可以参考下2023-04-04
在本篇文章里小编给大家整理了一篇关于Vue首屏性能优化组件知识点总结，有需要的朋友们可以跟着学习下。2021-11-11
在Vue组件中,data函数用于定义组件的数据,本文主要介绍了Vue组件data函数的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
这篇文章主要介绍了Nuxt的路由动画效果案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了Vuex实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了vue地区选择组件主要用于全国地区数据的操作，包括省，市，区三级联动，地区数据的添加和删除,本文重点给大家介绍vue地区选择组件教程详解，需要的朋友参考下吧2018-05-05
下面小编就为大家分享一篇vue页面离开后执行函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论