vue.js - Vue 指令访问 Vue 实例？

Question

如何从指令访问 Vue 实例？

我有这个 HTML

<div id='vueApp' v-init='my initial data from server-side'>

和这个脚本

var app = new Vue({
    el: '#vueApp',
    data: {
        myData: null
    }
});

Vue.directive('init', function(el, binding) {
    app.myData = binding.value;
});

它抛出这个错误:

Failed to resolve directive: init

Answer 1

您的特定错误是因为该指令是在 Vue之后创建的。

对于这个特定的指令，您可以通过 vnode.context 访问 Vue。

Vue.directive('init', {
  bind(el, binding, vnode){
    vnode.context.myData = binding.expression;
  }
});

const app = new Vue({
    el: '#vueApp',
    data: {
        myData: null
    }
});

Example .

您也可以考虑使用 vnode.context.$root。

发表评论编辑

你也可以这样做:

const initialData = {
    someData: "Hello Vue!"
};

const app = new Vue({
    el: '#vueApp',
    data: {
        myData: intialData
    }
});