在实现子组件之间的实时替换之前要学会父子组件之间的传值。具体步骤看:
https://blog.csdn.net/sanlingwu/article/details/80903537
项目的大体结构如下图所示:
其中main组件是board和preview组件的父组件,其中所有值都是在main父组件中获取的,获取到之后再传给子组件board和preview。页面是:
展示的东西要显示在preview里面也就是页面的右边。输入的东西是board组件里面的即页面左边。要达到的效果是在左边输入框输入东西右边对应的东西就跟着变。
1.在main组件里面获取值之后先对其进行处理,利用正则表达式对他进行查找,把要改变的地方加上class(不加id是因为一个页面只允许有一个id,如果右边页面有两个及以上相同的东西使用id就乱了)即:
this.
articlemsg =
this.
test2;
this.
previewmsg =
this.
test2.
bcontent;
var
re =
/
\(\(
.
*?\)\)
/
g;