访问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;
});

它抛出此错误：

未能解析指令: 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
    }
});

示例。

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

评论编辑

你也可以这样做：

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

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