vue echarts图标按钮给父组件传递值 this.$emit is not a function

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博客

7 this 是什么

js this 指的是什么_tenc1239的博客-CSDN博客