codemirror的theme更改,vue深度监听

该博客解决了Vue子组件中CodeMirror编辑器无法实时响应父组件theme更改的问题。通过设置props监听theme属性,并使用setOption方法动态修改组件的theme,实现了组件的热更新。重点涉及Vue的props绑定、watcher以及CodeMirror的配置更新。
摘要由CSDN通过智能技术生成

问题描述:父组件theme改变,codemirror主题只能刷新后变化,监听事件未添加。

解决思路:

  1. 查看父组件子组件值传递有没有问题
  2. 传值没问0题的前提下,监听事件的添加
  3. 改变codemirror组件的theme(关键点:操作是组件的option修改,需要有setOption(‘属性名’:‘属性值’)

代码输出:

props: {
			theme: {
				type: String,
				default: "",
			}
		},
watch: {
			'theme': {
				deep: true,
				handler: function(newVal) {
					this.editor.setOption('theme', newVal)
				}
			}
		},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值