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