vue-组件(component)

如何通过template与非template方式注册组件,本文将给与详细代码案例并且博主亲测可用,vue组件(component)使用方式实例:

1. 不使用template标签

<body>

<divid="a">

    <aaam="a++"bgcolor="red"></aaa>

    <aaam="b--"bgcolor="blue"></aaa>

</div>

</body>

<script>

Vue.component('aaa', {

    template: '<div><p>{{ m }}</p><p @click="add" :style="style">点这里-> a:{{a}} b:{{b}}</p></div>',

    data: function() {

        return {

            a: 0,

            b: 0,

            style: {

                fontSize: '30px',

                background: this.bgcolor

            }

        }

    },

    props: ['m', 'bgcolor'],

    methods: {

        add: function() {

            this.a++;

            this.b--;

        }

    }

});

 

new Vue({

    el: '#a'

})

</script>

2.使用template标签

<body>

<divid="a">

    <aaam="a++"bgcolor="red"></aaa>

    <aaam="b--"bgcolor="blue"></aaa>

</div>

<templateid="b">

    <div>

        <p>{{ m }}</p>

        <p@click="add" :style="style">点这里->a:{{a}} b:{{b}}</p>

    </div>

</template>

</body>

<script>

Vue.component('aaa', {

    template: '#b',

    data: function() {

        return {

            a: 0,

            b: 0,

            style: {

                fontSize: '30px',

                background: this.bgcolor

            }

        }

    },

    props: ['m', 'bgcolor'],

    methods: {

        add: function() {

            this.a++;

            this.b--;

        }

    }

});

new Vue({

    el: '#a'

})

</script>


评论 (0)

发表评论