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 相关文章推荐
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
巧用canvas
Jan 21 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
Vue.js中的高级面试题及答案
Jan 13 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
vue中的inject学习教程
2019/04/24 Javascript
小程序实现搜索框
2020/06/19 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python用户管理系统
2018/03/13 Python
Python paramiko模块的使用示例
2018/04/11 Python
sklearn+python:线性回归案例
2020/02/24 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
青年教师培训方案
2014/02/06 职场文书
学术会议主持词
2014/03/17 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
个人事迹材料范文
2014/12/29 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书