在JS中同步修改vue中的变量

2 篇文章 0 订阅

问题:在处理一个功能上遇到一个问题:在vue组件中,引入了一个JS文件,在JS文件动态创建了一些DOM节点,需要侦测dom节点中内容的变化同时改变vue中组件的内容。

思考:因为它是单独的一个JS文件,里面动态生成的dom可以通过oninput来侦测输入内容的变化,但要实时更新到vue组件中,那只能找他们的连接点或者搭桥(借助vuex、localStorage这些全局变量),想着可以利用对象类型,因为其是将引用放在堆中,真正的值存放在栈中,通过传递其引用作为桥梁来达到JS文件中修改vue中值的效果。
解决:通过上述方式并不利于今后维护,其实我们可以巧妙利用闭包达到目的,这组件中定义需要修改的方法,通过在JS调用该该方法来达到修改vue组件变量的目的。

vue中如下:

<template>
  <div class="about" id="about">
    {{text}}
  </div>
</template>
<script>
import Test from './test'
export default {
  name: 'About',
  data () {
    return {
      text: 'gg'
    }
  },
  mounted () {
    const test = new Test(
      {
        hooks: {
          input: value => this.text = value
        }
      }
    )
  }
}
</script>

类中方法

export default class Test {
  constructor(props = {}) {
    this.options = Object.assign({
      mode: 'write'
    }, props)
      this.create()
    }
    create() {
      let about = document.getElementById('about')
      let div = document.createElement('div')
      div.innerHTML = '<input type="text" id="inputText">'
      about.appendChild(div)
      let input = document.getElementById('inputText')
      input.addEventListener('input', () => {
          this.options.hooks.input(input.value)
      })
    }
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值