Vue.js数据集外部组件
Vue.js数据集外部组件
提问于 2017-07-20 10:34:44
我有一个组件，我想在组件之外设置一个数据项。
我怎么用指令来做这件事？
我在想这样的事情：
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>
知道我该怎么做吗？
-编辑--
我不想用道具来做这个！我有很多很多的领域。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-20 13:10:33
这应该能行。
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>
Stack Overflow用户
发布于 2017-07-20 12:51:25
您可以使用$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>
Stack Overflow用户
发布于 2017-07-20 10:54:17
如果我正确地理解了您，您应该使用道具将数据传递给您的组件。事实上，您只能使用一个变量(日期或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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45212283
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号