我有一个组件,我想设置一个数据项 在组件之外。
我如何使用指令执行此操作?
我在想这样的事情:
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>
知道如何让它发挥作用吗?
--编辑--
我不想为此使用 Prop !我有很多领域。
最佳答案
这应该有效。
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>
关于javascript - Vue.js 在组件外设置数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45212283/