美文网首页
引用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