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 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
原生js实现验证码功能
2017/03/16 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python实现手机销售管理系统
2019/03/19 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
优秀村官事迹材料
2014/01/10 职场文书
离职证明范本
2015/06/12 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
python使用shell脚本创建kafka连接器
2022/04/29 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android