[英]Vue.js set data outside component
我有一个组件,我想在组件外部设置一个数据项。
如何使用指令执行此操作?
我在考虑这样的事情:
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>
任何想法如何让这个工作?
- 编辑 -
我不想为此使用道具! 我有很多很多领域。
这应该工作。
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>
您可以使用$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>
如果我理解正确,您应该使用道具将数据传递给组件。 事实上,您只能使用一个变量(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.