标签：change 不同的 结果 doctype mod sub class button 自定义组件
下面是实现计数器作用的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue自定义组件v-model</title> </head> <body> <div id="app"> <Stepper v-model="goodsCount"></Stepper> </div> <script> Vue.component(‘Stepper‘, { props: [‘count‘], template: ` <div> <button @click="sub">-</button> <span>{{count}}</span> <button @click="add">+</button> </div> `, model: { //event:什么时候触发v-model行为 event: ‘change-count‘, // 定义传递给v-model的那个变量，绑定到哪个属性值上 prop: ‘count‘ }, methods: { sub() { // 触发上面model中定义的触发名称 // 这里不需要修改this.count的值，只要把最终的结果传递出去就行 this.$emit("change-count", this.count - 1) }, add() { this.$emit("change-count", this.count + 1) } } }) new Vue({ el: "#app", data: { goodsCount: 0 } }) </script> </body> </html>
标签：change 不同的 结果 doctype mod sub class button 自定义组件
原文地址：https://www.cnblogs.com/xshan/p/12342509.html
