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">
            
            
          

4 为什么监听不用watch?

在Vue中,父子组件之间传递数据有多种方式。使用$emit触发自定义事件并在父组件中监听自定义事件是其中一种方式。这种方式不需要使用watch。

watch通常用于监听单个属性或对象的变化,并触发相应的操作。而在子组件中使用$emit触发自定义事件,我们可以在父组件中监听自定义事件,并根据事件的参数执行相应的操作,不需要用到watch。

在这种情况下,我们在父组件中使用事件监听的方式来检测子组件中的更新,而且这种方式具有更好的可维护性。如果我们使用watch来监听子组件中的更新,则必须手动在父组件中设置watch,使代码变得复杂和不易维护。

因此,在这种情况下,使用自定义事件是更好的选择。

5 总结

5.1 子传父 emit 

5.2 属性变化监听watch

5.3 emit自定义事件是改变某个值变化 则也可以使用watch 来监听

你可能感兴趣的:(echarts,vue,vue.js,echarts,前端)