13-Vue自定义组件

Posted 2022-02-15 romantic-blood

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

父组件也可以直接在子组件的自定义标签上使用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标签调用的就是这个值。