我有 2 個組件：父子組件和一個 mixin。我試圖在它們兩個中使用一個函式。從父組件中的子組件呼叫 mixin 函式。這個 mixin 函式還改變了父組件中的資料變數，在 props 中參考的子組件中。
但是，在這行代碼中：
this.modals.filter = 'block'; occurs error: TypeError: Cannot set properties of undefined (setting 'filter')
我不明白為什么，因為 modals.filter 已經在 props 中參考了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="example" style="width:100%;height:100%">
<parent></parent>
</div>
</body>
<script>
var myMixin = {
methods: {
powerbiFilterModal: function() {
this.modals.filter = 'block';
if (this.embed.channelName, this.filters.columnName, this.filters.tableName) {
// Some other functions
// ...
console.log(this.embed.channelName, this.filters.columnName, this.filters.tableName);
// Hide modal
this.modals.filter = 'none';
// Clear inputs
this.embed.channelName = '';
this.filters.columnName = '';
this.filters.tableName = '';
}
}
}
};
Vue.component('child', {
mixins: [myMixin],
template: `
<div :style="{ display: filterOverlay }">
<span style="align-self: flex-end; cursor: pointer;" @click="closeModal">x</span>
<span style="align-self: center; margin-bottom: 4%">Filter Settings: </span>
<input type="text" placeholder="Define channel name" v-model.trim="channelName">
<input type="text" placeholder="Define filter name" v-model.trim="columnName">
<input type="text" placeholder="Define table to filter" v-model.trim="tableName">
<button @click="powerbiFilterModal">Subscribe & Send</button>
</div>
`,
props: {
filterOverlay: {
type: String,
required: false,
default: 'none'
},
channelName: {
type: String,
required: false
},
columnName: {
type: String,
required: false
},
tableName: {
type: String,
required: false
}
},
methods: {
closeModal: function() {
this.$emit('emitEv', 'none');
}
}
});
Vue.component('parent', {
mixins: [myMixin],
template: `
<div>
<button @click="powerbiFilterModal">Set Filters</button>
<child @emitEv="changeOverlay" v-bind:filter-overlay="modals.filter">Child</child>
</div>
`,
data: function() {
return {
modals: {
filter: 'none'
},
embed: {
channelName: ''
},
filters: {
columnName: '',
tableName: ''
}
}
},
methods: {
changeOverlay: function(value) {
this.modals.filter = value;
}
}
});
new Vue({
el: "#example"
});
</script>
</html>
uj5u.com熱心網友回復：
解釋我的評論
子組件
Vue.component("child", {
// mixins: [myMixin], remove mixin from child
template: `
<div>
<!-- bla bla bla -->
<button @click="$emit('fire')">Subscribe & Send</button>
</div>
...
`
});
父組件
Vue.component("parent", {
mixins: [myMixin],
template: `
<div>
<button @click="powerbiFilterModal">Set Filters</button>
<!-- HERE we listen for event (fire) from child and call powerbiFilterModal method from mixin -->
<child @fire="powerbiFilterModal" @emitEv="changeOverlay" v-bind:filter-overlay="modals.filter">Child</child>
</div>
`,
data: function () {
return {
modals: {
filter: "none"
},
embed: {
channelName: ""
},
filters: {
columnName: "",
tableName: ""
}
};
},
methods: {
changeOverlay: function (value) {
this.modals.filter = value;
}
}
});
uj5u.com熱心網友回復：
powerbiFilterModal()正在參考this.modals，如果在父組件中使用它是可以的，但是子組件沒有這樣的資料，所以如果在子組件中呼叫mixin會導致錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366322.html
標籤：javascript Vue.js 成分 混入