App.vue中引入自定义组件

components目录中定义组件:Person.vue

目录截图:

Person.vue文件中内容:

javascript 复制代码
<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文件中内容:

javascript 复制代码
<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结构中引入组件。

相关推荐
野生的编程萌新19 小时前
【C++深学日志】C++编程利器:缺省参数、函数重载、引用详解
c语言·开发语言·c++
Slaughter信仰19 小时前
深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)第十三章知识点问答(15题)
java·开发语言·jvm
大翻哥哥20 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
小柯J桑_20 小时前
C++之特殊类设计
java·开发语言·c++
QiZhang | UESTC20 小时前
JAVA算法练习题day11
java·开发语言·python·算法·hot100
bigdata-rookie20 小时前
Java 反射
java·开发语言
能工智人小辰20 小时前
Java8 Swing实现计算器
开发语言
SccTsAxR20 小时前
[C语言]常见排序算法①
c语言·开发语言·经验分享·笔记·其他·排序算法
Monly2121 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
小桥风满袖21 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript