vue 数据从父组件传递到子组件，子组件也接收到了数据，加上字体高亮后渲染失败，去掉高亮后渲染正常

Z时代
2024-02-22
分类：IT

// 父组件    
// 接收表格数据
    receiveArticleViewData(obj,keywords) {
        this.article_obj = obj
        this.$forceUpdate()
        // `高亮`关键字 keywords
        // console.log(keywords)
        this.$nextTick(function () {
        this.highLight(keywords)
      })
    },
    // 高亮
highLight(keywords) {
      let table_data = document.getElementById('table_data')
      let tr = table_data.getElementsByTagName('tr')
      let article = document.getElementById('article')
      for (let i = 0; i < keywords.length; i++) {
        let keyword = keywords[i]
        let span1 = '<span style="color:red;font-weight: bold;">'
        let span2 = '</span>'
        let re = new RegExp(keyword, 'g')
        let span = span1 + keyword + span2
        for (let j = 0; j < tr.length; j++) {
          tr[j].innerHTML = tr[j].innerHTML.replace(re, span)
        }
        // console.log(article.innerText)
        // console.log('11111111111111111111111')
        // 去掉下面这一行，正常渲染，article.innerText也显示数据正常传递，正常渲染
        article.innerHTML = article.innerHTML.replace(re, span)
        // 加上上面这一行，子组件数据传递正常，但是article.innerText显示还是之前的数据
      }
    },
// 子组件
watch: {
    'article_obj': {
      handler: function () {
        console.log(this.article_obj)
        // 这儿打印的是更新的数据
        this.$forceUpdate()
      }
    },  },