Vue.js父子组件共用mixin方法执行时报TypeError错误如何解决

你在子组件中调用powerbiFilterModal时，方法内的this指向子组件实例，但modals、embed、filters三个属性仅在父组件的data中声明，子组件实例上不存在this.modals，因此修改this.modals.filter时会抛出undefined赋值错误。
你对props的理解存在偏差：父组件仅将modals.filter的字符串值传递给子组件的filterOverlay属性，并没有把完整的modals对象传递给子组件，子组件完全感知不到modals对象的存在。

不要在子组件直接调用mixin的修改逻辑，通过父子组件事件通信，由父组件执行mixin方法即可，修改点如下：

1. 移除子组件对myMixin的引入，子组件仅负责交互和事件抛出
2. 修复子组件不能直接修改props的问题：将输入框的v-model绑定改为事件触发，通知父组件更新对应值
3. 子组件点击提交按钮时抛出事件，父组件监听事件后执行powerbiFilterModal方法

修改后的核心代码示例：

// 子组件修改部分
Vue.component('child', {
  // 删掉mixins: [myMixin]
  template: `
  <div :style="{ display: filterOverlay }">
      <span class="close" style="align-self: flex-end; cursor: pointer;" @click="closeModal">x</span>
      <span class="label" style="align-self: center; margin-bottom: 4%">Filter Settings: </span>
      <input type="text" placeholder="Define channel name" :value="channelName" @input="$emit('update:channelName', $event.target.value.trim())">
      <input type="text" placeholder="Define filter name" :value="columnName" @input="$emit('update:columnName', $event.target.value.trim())">
      <input type="text" placeholder="Define table to filter" :value="tableName" @input="$emit('update:tableName', $event.target.value.trim())">
      <button @click="$emit('submit')">Subscribe & Send</button>
  </div>
  `,
  props: {
      filterOverlay: {
          type: String,
          required: false,
          default: 'none'
      },
      channelName: {
          type: String,
          required: false
      },
      columnName: {
          type: String,
          required: false
      },
      tableName: {
          type: String,
          required: false
      }   
  },
  methods: {
      closeModal: function() {
          this.$emit('emitEv', 'none');
      }
  }
});

// 父组件调用子组件部分修改
template: `
  <div>
      <button @click="powerbiFilterModal">Set Filters</button>
      <child 
        @emitEv="changeOverlay" 
        v-bind:filter-overlay="modals.filter"
        :channelName="embed.channelName"
        :columnName="filters.columnName"
        :tableName="filters.tableName"
        @update:channelName="embed.channelName = $event"
        @update:columnName="filters.columnName = $event"
        @update:tableName="filters.tableName = $event"
        @submit="powerbiFilterModal"
      >Child</child>
  </div>
`,

你当前mixin代码中的判断条件写法错误：

// 逗号表达式只会返回最后一个值的判断结果，前面两个条件会被忽略
if (this.embed.channelName, this.filters.columnName, this.filters.tableName)

需要改为逻辑与判断才符合预期：

if (this.embed.channelName && this.filters.columnName && this.filters.tableName)

内容的提问来源于stack exchange，提问作者Anna