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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue中如何让子组件修改父组件数据
一.关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1.常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2.如果要一开始就执行 ... watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;
-
解决vue中修改了数据但视图无法更新的情况
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个
-
Vue 父子组件的数据传递、修改和更新方法
父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c
-
Vue刷新修改页面中数据的方法
因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:
-
浅谈vue单一组件下动态修改数据时的全部重渲染
今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定
-
vue 修改 data 数据问题并实时显示的方法
首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初
-
Vue.set()动态的新增与修改数据,触发视图更新的方法
参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值 用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新. 例: data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, {message:"姜小帅",id:"3&q
-
Vue 组件修改根实例的数据的方法
思路: 1 在组件内部监听事件并把事件 emit 2 在组件上监听 emit 出来的事件 3 当事件发生时执行对应的函数去修改根实例上的 data 实现: 1 在组件内部的 input框 中监听 input事件,并给 input事件 绑定triggerInput函数 2 当往 input框 中输入内容时,触发 triggerInput 函数 triggerInput函数 向外部 emit 一个 edit事件 和 输入框的值 3 在组件上监听这个 edit事件 并给 edit事件 绑定 trigg
-
vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa
-
Vue组件选项props实例详解
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据
-
vue 组件高级用法实例详解
一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件
-
Vue组件传值过程中丢失数据的分析与解决方案
前言 在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝.这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美的,引用类型值中的某些属性值,仍不能完整地复制到新的变量中.比如函数值,在深拷贝过程中,就会丢失. 问题 在实际项目中,假如使用了二次封装的组件,并且封装的组件内部做了一些属性值的深拷贝操作,就有极有可能因为传入的属性值是引用类型的值,导致丢失部分数据. 举例 以基于 el-table 封装的 ak-table 组件
-
Vue实现动态创建和删除数据的方法
视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ
-
Vuex 在Vue 组件中获得Vuex 状态state的方法
Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照. 在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的.在Vue组件中获取Vuex状态总共有 五种 可行的方法. 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态:(需要导入store组件) const Counter={ template:`<di
-
在Vue组件上动态添加和删除属性方法
如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法
-
Vue组件文档生成工具库的方法
目录 解析.vue 文件 提取文档信息 提取组件名称.描述.props.methods.model 提取描述 提取 methods 提取 props 提取 model 提取组件Events 提取组件Slots 结语 程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.
-
vue2中组件互相调用实例methods中的方法实现详解
目录 前言: 开始前: 使用 第一步.定义全局mixin 第二步添加代码提示d.ts声明文件 在项目下新建jsconfig.json 添加shims-vue.d.ts声明文件 添加event-keys.d.ts声明文件 第三步编写webpack插件 新建global-dispatch.js 自动生成event-keys.d.ts 添加vue-path-loader.js webpack loader文件 配置vue.config.js 后记 仓库地址 总结 前言: 大家都知道在vue2中相互调用
随机推荐
- 详解如何在NodeJS项目中优雅的使用ES6
- AngularJS单选框及多选框实现双向动态绑定
- php curl中gzip的压缩性能测试实例分析
- Linux 中PHP的安装教程
- 实现WIN2003 IIS最小权限分配的批处理
- java启动线程的3种方式对比分析
- asp.net html控件的File控件实现多文件上传实例分享
- Docker镜像保存为文件及从文件导入镜像的方法
- mysql中迅速插入百万条测试数据的方法
- python轻松查到删除自己的微信好友
- sqlserver 2000 远程连接 服务器的解决方案
- 学习javascript面向对象 理解javascript对象
- Windows Server 2008 R2远程设置选项灰色解决方法
- 深入浅析Mybatis的缺陷问题
- Android学习笔记45之gson解析json
- C#裁剪,缩放,清晰度,水印处理操作示例
- Android实现上拉加载更多ListView(PulmListView)
- 详解React 在服务端渲染的实现
- python matplotlib坐标轴设置的方法
- iOS 封装导航栏及返回,获取控件所在控制器的实例