components目录中定义组件：Person.vue
目录截图：
Person.vue文件中内容：
<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><!--定义了一个事件，点击这个按钮之后，调用 changeName方法--><button @click="changeName">修改名字</button> <button @click="changeAge">增加年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts">export default{name:'Person', //组件的名字data(){return{name:'张三',age:18,tel:'13888888888'}},methods:{showTel(){alert(this.tel)},changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1}}}
</script><style scoped>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>
App.vue文件中内容：
<template><!-- html结构 --><div class="app"><h1>你好啊</h1><Person/></div>
</template><script lang="ts">
// 写js代码 或者 ts代码import Person from './components/Person.vue'export default{name: 'App', //组件的名字components:{Person} //注册组件}</script><style>
/* 写样式 */.app{background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
我的理解：
定义一个组件，在App.vue文件中去引用这个组件。定义组件的时候，需要在export default中定义组件的名字，其中点击事件是@click ，后面写上函数的名字，函数是定义在method:内的。其中在在函数中拿到变量的值，使用的是this.变量名 。在App.vue中引入自定义的组件，需要在script标签中，使用import去引入，并且在exportdefault中去注册组件，这样才能在html结构中引入组件。
