用于访问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 之后创建的.

对于此特定指令,您可以通过访问Vue vnode.context.

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