阅读 14

vue-组件基础

vue-学习记录

组件基础

Vue的组件是从使用Vue.component开始的。 Vue.component('组件名称',object),至于object里的参数容我们慢慢在后面的🌰中道来。

Vue组件监听按钮被点击的次数:

Vue.component('button-clicknum',{
    data:{
        number:0,
    },
    template:'<button @click="number++">你点击了{{number}}次</button>'
});
复制代码

因为组件须在Vue实例下才能使用,所以需要我们 new Vue 并使用上方的 button-clickNum 组件名称作为自定义元素,组件中的参数所接受的跟vue 实例一样除了 el 是不接受的只能在vue 实例中。

new Vue({
    el:'#demo-1'
});
复制代码

现在在body下添加标签:

<div id="demo-1">
    <button-clicknum></button-clicknum>
</div>
复制代码

效果:

在每次点击按钮后将进行data下 number 的增加。

组件的复用,只需要在标签内多次的输入自定义元素即可:

<div id="demo">
    <button-clicknum></button-clicknum>
    <button-clicknum></button-clicknum>
    <button-clicknum></button-clicknum>
</div>
复制代码

效果:

当点击每一个按钮时,每一个按钮都是vue的实例,它们各自维护自己的 number。

vue 组件下的 data必须为函数

data:function(){
    return {
        xxx:''
    }
}
复制代码

组件调用后返回的data都是独立的,而vue没有这一条规则的话,组件之间就会互相影响,大家切记哦!😊

评论