在实现子组件之间的实时替换之前要学会父子组件之间的传值。具体步骤看：

https://blog.csdn.net/sanlingwu/article/details/80903537

项目的大体结构如下图所示：

其中main组件是board和preview组件的父组件，其中所有值都是在main父组件中获取的，获取到之后再传给子组件board和preview。页面是：

展示的东西要显示在preview里面也就是页面的右边。输入的东西是board组件里面的即页面左边。要达到的效果是在左边输入框输入东西右边对应的东西就跟着变。

1.在main组件里面获取值之后先对其进行处理，利用正则表达式对他进行查找，把要改变的地方加上class（不加id是因为一个页面只允许有一个id，如果右边页面有两个及以上相同的东西使用id就乱了）即：

数组去重函数：

test2是一个测试数据，结构如下：

再把加完标签的值即this.previewmsg传给preview组件。这样preview组件展示在页面上就是加class标签的。

2.在board组件里面写个函数实时监控输入框的输入情况。即：

html里面：（页面的加载是痛殴）

searchMonitorList函数传的是输入框的输入值和此输入框的id。输入框的id对应之前在main组件里面加的class标签。通过$("." +id).html(event)就可以看见变化。event是输入框的值。