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


Posted in Javascript onApril 02, 2019

思路:

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 相关文章推荐
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
javascript 闭包详解
Feb 15 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
vue鼠标悬停事件实例详解
Apr 01 #Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
详解Vue前端对axios的封装和使用
Apr 01 #Javascript
浅谈js闭包理解
Apr 01 #Javascript
详解Vue之父子组件传值
Apr 01 #Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 #Javascript
JS中的防抖与节流及作用详解
Apr 01 #Javascript
You might like
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python读大数据txt
2016/03/28 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
前厅收银主管岗位职责
2014/02/04 职场文书
业务员简历自我评价
2014/03/06 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书