1 子组件点击事件, that = this; 解决this.$emit is not a function
const that = this;
const toolbox = {
feature: {
myBtn1: {
show: true,
title: '一图',
showTitle: true,
icon: 'path://M512 0A512 512 0 1 0 512 1024A512 512 0 0 0 512 0M320 320V192h384v128zM128 416V288h256v128zM320 704V576h384v128zM128 800V672h256v128z',
onclick: () => {
that.$emit('updateIsMultiChart', !this.isMultiChart)
},
},
},
},
2 父组件定义方法IsMultiChartEvent 监听emit 的updateIsMultiChart 事件
methods: {
IsMultiChartEvent(value) {
this.isMultiChart = value
console.log('New value:', value);
},
3 事件和监听方法绑定 -> 数据传递
div v-if="isMultiChart">
<!-- 显示 MultiChart 组件 -->
<MultiChart @updateIsMultiChart="IsMultiChartEvent" />
</div>
4 为什么监听不用watch?
在Vue中,父子组件之间传递数据有多种方式。使用$emit触发自定义事件并在父组件中监听自定义事件是其中一种方式。这种方式不需要使用watch。
watch通常用于监听单个属性或对象的变化,并触发相应的操作。而在子组件中使用$emit触发自定义事件,我们可以在父组件中监听自定义事件,并根据事件的参数执行相应的操作,不需要用到watch。
在这种情况下,我们在父组件中使用事件监听的方式来检测子组件中的更新,而且这种方式具有更好的可维护性。如果我们使用watch来监听子组件中的更新,则必须手动在父组件中设置watch,使代码变得复杂和不易维护。
因此,在这种情况下,使用自定义事件是更好的选择。
5 总结
5.1 子传父 emit
5.2 属性变化监听watch
5.3 emit自定义事件是改变某个值变化 则也可以使用watch 来监听
6 为什么要 that =this
vue js 回调函数 异步处理 为什么要 let that = this_tenc1239的博客-CSDN博客