vue.js - 自定义指令数据无法传递给 Vue 3 中的方法

Question

在我的 html 中，我引用了指令：v-init:url="myurlhere"

    data() {
      return {
        currentPage: 1,
        url: '',
        news: '',
      }
    },
    directives: {
        init: {
            mounted(el, binding) {
                console.log(binding.value);
                this.iterateUrlContents(binding.value)
            },
        }
    },
    methods: {
        iterateUrlContents(url) {
            console.log('url: ' + url);

console.log(binding.value)显示了预期的结果，但是当我调用 iterateUrlContents 时，我得到以下信息：

执行指令挂钩期间未处理的错误

未捕获的类型错误：无法读取未定义的属性“iterateUrlContents”

而且我还发现，如果我尝试，this.url = binding.value我会得到

未捕获的类型错误：无法设置未定义的属性“url”

为什么 binding.value 未定义，如何将这些信息传递给我的方法？

标签： vue.jsvuejs3

Answer 1

如果你想访问组件实例，你需要通过binding.instanceVue3 来完成。