Vue子组件需要先声明再引用。例如:
//声明组件
input-number.js
Vue.component('input-number', {
template: `
<div class="input-number">
<input type="text" :value="currentValue" @change="handleChange">
<button @click="handleDown" :disabled="currentValue <= min">-</button>
<button @click="handleUp" :disabled="currentValue >= max">+</button>
</div>`,
});
index.js
var app = new Vue({
el: '#app',
data: {
value: 5
}
});
//引用组件
index.html
<div id="app">
<input-number v-model="value" :max="100" :min="0"></input-number>
</div>
...
<!--注入引入顺序,先引用子组件进行声明-->
<script src="input-number.js"></script>
<script src="index2.js"></script>
网友评论