Vue 外部函数引用

Question

想请教一下为什么引入外部函数直接在标签事件中使用会报错提示

而如果直接在methods 中调用就不会报错呢

调用方


被调用方

新接触前端， 想搞明白其中的原理 求解答 ### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

插值表达式中的字段，都会被隐式转换成 this[XXX] 的方式调用，而 this 是当前 Vue 组件的实例。

你要想在插值表达式中使用外部函数，需要挂载到当前 Vue 组件上。

比如挂到 data 上：

import { myFunc } from 'demo.js';
export default {
    data() {
        return {
            myFunc
        };
    }
}

Answer 2

1、generateQuerySource没有挂到this上，template里面使用generateQuerySource 相当于 this.generateQuerySource

2、@change是一个事件，值 应该是一个方法