我制作了一个类似(FilterCheckbox.js)的故事组件:
export default {
name: 'filter-checkbox',
props: ['options'],
data() {
return {
text: this.$props.options
}
},
watch: {
options: function () {
this.text = this.$props.options;
}
},
template: `
<label class="pure-material-checkbox">
<input class="filterAllInput" type="checkbox" @click="onChange">
<span> {{text}} </span>
</label>
`,
methods: {
onChange() {
this.$emit('change');
},
},
};
它是一个带有文本和自己样式的复选框。现在,我想在看起来像这样的组件中使用它(Filters.vue):
<template>
<div>
<filter-checkbox @change="onChangeWhenFilterIsChoosen()" :options="options"></filter-checkbox>
</div>
</template>
<script>
import FilterCheckbox from './../../stories/FilterCheckbox';
name: 'Filters',
components: { FilterCheckbox },
data: () => ({
options: 'test text'
}),
methods: {
onChangeWhenFilterIsChoosen: function () {
}
},
</script>
以某种方式,导入无法正常工作,并且故事组件未在我的其他组件中显示。我究竟做错了什么?
请以此更新您的Filters
组件;
<script>
import FilterCheckbox from './../../stories/FilterCheckbox';
export default {
name: 'filters',
components: { filterCheckbox: FilterCheckbox },
data: () => ({
options: 'test text'
}),
methods: {
onChangeWhenFilterIsChoosen: function () {
//
}
},
}
</script>
为了使用您的filter-checkbox
组件,必须将其导入,因为camelCase是component
对象,才能在模板中使用它。