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

Example

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

发表评论编辑

您也可以这样做：

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

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