13-Vue自定义组件

当子组件需要向父组件传递数据时,就要用到自定义组件。

父组件也可以直接在子组件的自定义标签上使用v-once来监听子组件触发的自定义事件。

<div id="app">

<p>总数:{{total}}</p>

<my-component @increase="handleGetTotal"

                           @reduce="handleGetTotal"></my-component>

</div>

<script>

Vue.component("my-component",{

template:`<div>

<button @click="handleIncrease">+1</button>

<button @click="handleReduce">-1</button>

</div>`,

data(){

return{

counter:0

}

},

methods:{

handleIncrease(){

this.counter++;

this.$emit("increase",this.counter)

},

handleReduce(){

this.counter--;

this.$emit("reduce",this.counter)

}

}

});

new Vue({

el:"#app",

data:{

counter:0

},

methods:{

handleGetTotal(total){

this.total = total

}

}

})

</script>

个人理解:

<my-component>组件渲染的两个button,当点击第一个button时触发绑定的click事件同时触发函数handleIncrease,函数实现内部的counter++操作,并将加之后的值作为名字是increase的值传给父级,@increase,即点击第一个button的的时候执行handleIncrease函数传完值之后立刻执行父级的@increase="handleGetTotal",执行handleGetTotal函数,用function接收传入的this.counter作为total值,this.total = total传给父级total,最后p标签调用的就是这个值。

上一篇:Suggestion:use a compatible library with a minSdk of at most 16,or increase this project's minS


下一篇:启动系统参数调整