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

2024-10-17 08:37:19

思路：

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 父子组件的数据传递、修改和更新方法

父子组件之间的数据关系,我这边将情况具体分成下面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中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个
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.set()动态的新增与修改数据,触发视图更新的方法

参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新. 例: data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, {message:"姜小帅",id:"3&q
浅谈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 组件修改根实例的数据的方法

思路: 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中相互调用

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

相关推荐

随机推荐