注释很详细，直接上代码

上一篇

新增内容

1. 数据绑定方法照常
2. 数据定义方法需要作为函数返回值

源码

MyTest.vue

<template><div><h1>我的功德：{{merits}} </h1><button @click="merits+=num1">功德加一</button><button @click="merits+=num2">功德加十</button><button @click="merits+=num3">功德加百</button></div>
</template><script>export default {// 因为组件每次使用都需要是一个新的对象，// 所以data数据都需要是函数返回data() {return {merits:999,num1:1,num2:10,num3:100}},}
</script><style lang="scss" scoped></style>

App.vue

<template><div id="app"><!-- 多次使用每一个都是新的对象，不会有影响 --><MyTest/><MyTest/><MyTest/></div>
</template><script>
// 导入局部注册组件
import MyTest from './components/MyTest.vue';
export default {name: 'App',components: {//注册局部注册组件MyTest}
}
</script>
<style>
*{margin: 0;padding: 0;
}
</style>

效果演示