引用Vue子组件不显示问题

2020-12-24  本文已影响0人  DD_Dog

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>
上一篇下一篇

猜你喜欢

热点阅读