Vue.js在組件外部設置數據

Question

我有一個組件，我想在組件外部設置一個數據項。

如何使用指令執行此操作？

我在考慮這樣的事情：

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

但它不起作用：

 Vue.directive('init', { bind: function(el, binding, vnode) { vnode.context[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 1

這應該工作。

 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

您可以使用$data引用組件的$data 。

 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> 

Answer 3

如果我理解正確，您應該使用道具將數據傳遞給組件。 事實上，您只能使用一個變量（date或initDate），用法是相同的。

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

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

然后在HTML中你使用它像這樣：

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