Vue.js setzen Daten außerhalb der Komponente

Question

Ich habe eine Komponente und ich möchte ein Datenelement außerhalb der Komponente festlegen.

Wie würde ich dies mit einer Direktive tun?

ich über so etwas wie dieses Denken:

Vue.directive('init', { 
    bind: function(el, binding, vnode) { 
     vnode.context[binding.arg] = binding.value; 
    } 
}); 

Aber es funktioniert nicht:

Vue.directive('init', { 
 
    bind: function(el, binding, vnode) { 
 
    vnode.context[binding.arg] = binding.value; 
 
    } 
 
}); 
 

 
Vue.component('test', { 
 
\t template: '<p>{{date}}</p>', 
 
    data() { 
 
    \t return { 
 
    \t \t date: "" 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app' 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script> 
 

 

 
<div id="app"> 
 
    <test v-init:date="'2017-07-20 09:11:42'"></test> 
 
</div>

Jede Idee, wie ich würde das Produkt an der Arbeit?

--edit--

Ich will nicht für diese Requisiten verwenden! Ich habe viele und viele Felder.

Answer 1

Diese funktionieren sollte.

Vue.directive('init', { 
 
    bind: function(el, binding, vnode) { 
 
    let component = el.__vue__ 
 
    component[binding.arg] = binding.value 
 
    } 
 
}); 
 

 
Vue.component('test', { 
 
    template: '<p>{{date}}</p>', 
 
    data() { 
 
    return { 
 
     date: "" 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app' 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script> 
 

 

 
<div id="app"> 
 
    <test v-init:date="'2017-07-20 09:11:42'"></test> 
 
</div>

Answer 2

Wenn ich Sie richtig verstanden habe, sollten Sie Requisiten für die Weitergabe der Daten an Ihre Komponenten verwenden. In der Tat können Sie nur eine Variable verwenden (entweder date oder initDate), die Verwendung ist die gleiche.

Vue.component('test', { 
    template: '<p>{{date}}</p>', 
    props:['initDate'], 
    data() { 
    return { 
      date: "" 
    } 
    } 
}); 

new Vue({ 
    el: '#app' 
}); 

Und dann in HTML Sie es wie folgt verwenden:

<div id="app"> 
    <test :initDate="2017-07-20 09:11:42"></test> 
</div> 

Answer 3

Sie zu einer Komponente Daten $data Verwendung finden können.

Vue.directive('init', { 
 
    bind: function(el, binding, vnode) { 
 
    vnode.context[binding.arg] = binding.value; 
 
    } 
 
}); 
 

 
Vue.directive('initData', { 
 
    bind: function(el, binding, vnode) { 
 
    vnode.context.$data[binding.arg] = binding.value; 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    ciudad: '' 
 
    }, 
 
    components: { 
 
    cityInput: { 
 
     data() { 
 
     return { 
 
      ciudad: '' 
 
     } 
 
     } 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <input v-model="ciudad" v-init:ciudad="'Madrid'"> {{ciudad}} 
 
    <city-input inline-template> 
 
    <div> 
 
     <input v-model="ciudad" v-init-data:ciudad="'Lisbon'"> {{ciudad}} 
 
    </div> 
 
    </city-input> 
 
</div>