我有这样的代码:
Vue.component("sample", {
inherit: true,
template: "#sample",
props: {
active : "active",
...
},
methods: {
forceChangeActive: function(){
var activeItem = this.$parent._data.active;
var modalSetup = this.$parent._data.showModal;
console.log("1.before function", this.$parent._data);
this.$parent.$options.methods.baseAction(activeItem, modalSetup);
console.log("2.before function", this.$parent._data);
});
}
});
new Vue({
el: "#app",
data: {
active: 0,
showModal: false,
...
},
methods: {
baseAction: function(activeItem, modalSetup){
console.log("3.modal", modalSetup, "activeItem": activeItem);
modalSetup = true;
activeItem = 2;
console.log("4.modal", modalSetup, "activeItem": activeItem);
}
}
});
新的Vue中有active和showModal数据变量。现在,如果我使用this.active或this.showModal,我将两者都未定义。 控制台输出是:
- 在函数对象{active = 0,showModal = false}
之前- modal false,activeItem 0
- modal true,activeItem 2
- 在函数对象{active = 0,showModal = false}
之前 醇>
如何在新的Vue或组件中更改变量值?
答案 0 :(得分:2)
inherit:true
已被弃用。
您需要使用属性将active
和showModal
显式传递给子组件。您可以使用.sync
确保将其共享回父级:
<sample :active.sync="active" :show-modal.sync="showModal"></sample>