下面的两个示例包含相同的确切模板标记，但呈现的方式完全不同
在下面的代码段中，您将看到渲染的输出仅包含1个复选框，而应包含2个复选框（有关正确显示，请参见第二个示例）
const store = new Vuex.Store({
state: {
attribute: {
tag: true,
bag: false
}
},
mutations: {
setAttr(state, {
value,
attribute
}) {
state.attribute[attribute] = value;
}
}
});
Vue.component('custom-checkbox', {
props: ['attribute'],
template: '<div><input type="checkbox" v-model="checkBox">{{attribute}}</div>',
computed: {
checkBox: {
get() {
return this.$store.state.attribute[this.attribute]
},
set(value) {
this.$store.commit('updateMessage', {
value,
attribute: this.attribute
});
}
}
}
});
new Vue({
el: '#app',
store
});<div id="app">
<div>
<custom-checkbox attribute="tag" />
<custom-checkbox attribute="bag" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
const store = new Vuex.Store({
state: {
attribute: {
tag: true,
bag: false
}
},
mutations: {
setAttr(state, { value, attribute }) {
state.attribute[attribute] = value;
}
}
});
Vue.component('custom-checkbox', {
props: ['attribute'],
template: '<div><input type="checkbox" v-model="checkBox">{{attribute}}</div>',
computed: {
checkBox: {
get() {
return this.$store.state.attribute[this.attribute]
},
set(value) {
this.$store.commit('updateMessage', {
value,
attribute: this.attribute
});
}
}
}
});
new Vue({
el: '#app',
store,
template: '<div><custom-checkbox attribute="tag" /><custom-checkbox attribute="bag" /></div>'
});<html>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
</body>
</html>
据我了解，vue的工作方式是，如果未在实例上显式设置#app，它将使用template的内容并将其用作其模板。
如果是这样，那么是什么使第一个仅渲染一个元素，第二个都渲染呢？
行为似乎不一致，尤其是考虑到模板在两者上完全相同。