vue和js文件相互监听DOM内容变化

傷城~ 2022-11-29 05:58 350阅读 0赞

**前言**：vue文件引入一个js文件，js中的按钮控制vue  input弹框的出现，vue中的弹框输入的内容需要存入js文件。（ps:不要问为何不都用vue，设计如此），那么现在需要在vue中获取js控制弹框显隐的值，需要在js中获取vue中input后的内容。

**实现：** 先介绍一下**MutationObserver**

**MutationObserver** 是一个可以监听DOM结构变化的接口。

官方示例：

//选择一个需要观察的节点
    var targetNode = document.getElementById('some-id');
    
    // 设置observer的配置选项
    var config = { attributes: true, childList: true, subtree: true };
    
    // 当节点发生变化时的需要执行的函数
    var callback = function(mutationsList, observer) {
        for(var mutation of mutationsList) {
            if (mutation.type == 'childList') {
                console.log('A child node has been added or removed.');
            }
            else if (mutation.type == 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    };
    
    // 创建一个observer示例与回调函数相关联
    var observer = new MutationObserver(callback);
    
    //使用配置文件对目标节点进行观测
    observer.observe(targetNode, config);
    
    // 停止观测
    observer.disconnect();

那么根据案例代码，实现我们的vue  和 js demo

test.vue文件如下：

<template>
        <div>
            <div id="box111"></div>
            <div v-show="isShow">
                输入内容: <input type="text" name="fname" v-model='inputText'><br>
                <input type="submit" value="提交" @click="showTextHandler">
            </div>
            <div id="showText11">{
       {showText}}</div>
        </div>
    </template>
    <script>
      import init from '../utils/test'
      export default {
        name: 'index',
        data() {
          return {
            isShow: false,
            inputText: '',
            showText: ''
          }
        },
        mounted() {
          init()
    
          // 选择将观察突变的节点
          var targetNode = document.getElementById('showdiv');
          // 观察者的选项(要观察哪些突变)
          var config = {
            attributes: true,
            childList: true,
            subtree: true,
            characterData:true,
            characterDataOldValue:true,
            attributeOldValue:true
          };
          // 当观察到突变时执行的回调函数
          var callback = (mutationsList) => {
            mutationsList.forEach((item, index) => {
              console.log(item);
              if (item.type == 'childList') {
                console.log('获取到js变化：', item.target.innerHTML);
                this.isShow = item.target.innerHTML == 'show' ? true : false
              }
            });
          };
          // 创建一个链接到回调函数的观察者实例
          var observer = new MutationObserver(callback);
          // 开始观察已配置突变的目标节点
          observer.observe(targetNode, config);
        },
        methods: {
          showTextHandler() {
            document.getElementById('showText11').innerText = this.inputText//监听到的type类型是childList
            // this.showText = this.inputText  //这种方式监听到的type是characterData
          }
        }
      }
    </script>

test.js文件如下：

export default function init() {
      let html = ''
      html += `<button id='btn11'>按钮</button>`
      html += `<div id='showdiv'></div>`
      document.getElementById('box111').innerHTML = html
      let btn = document.getElementById('btn11')
      let showdiv = document.getElementById('showdiv')
    
      btn.addEventListener('click', () => {
        console.log(showdiv.innerText);
        if(showdiv.innerText == 'show'){
          showdiv.innerText = 'hide'
        }else {
          showdiv.innerText = 'show'
        }
      })
    
    
      // 选择将观察突变的节点
      var targetNode1 = document.getElementById('showText11');
      // 观察者的选项(要观察哪些突变)
      var config1 = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData:true,
        characterDataOldValue:true,
        attributeOldValue:true
      };
      // 当观察到突变时执行的回调函数
      var callback1 = (mutationsList) => {
        mutationsList.forEach((item, index) => {
          console.log(item);
          if(item.type =='childList'){
            console.log("获取到vue内容变化：",item.target.innerHTML);
          }
        });
      };
      // 创建一个链接到回调函数的观察者实例
      var observer1 = new MutationObserver(callback1);
      // 开始观察已配置突变的目标节点
      observer1.observe(targetNode1, config1);
    
    }