美文网首页
引用Vue子组件不显示问题

引用Vue子组件不显示问题

作者: DD_Dog | 来源:发表于2020-12-24 14:21 被阅读0次

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>

相关文章

网友评论

      本文标题:引用Vue子组件不显示问题

      本文链接:https://www.haomeiwen.com/subject/qsjmnktx.html