vue-组件(component)

2018年3月31日14:08:38 发表评论
如何通过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>
爱一点爱生活,一点技术分享。
x

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: