// 父组件 // 接收表格数据 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() } }, },