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结构中引入组件。

相关推荐
吞掉星星的鲸鱼41 分钟前
使用高德api实现天气查询
前端·javascript·css
我命由我1234543 分钟前
Spring Boot 自定义日志打印(日志级别、logback-spring.xml 文件、自定义日志打印解读)
java·开发语言·jvm·spring boot·spring·java-ee·logback
....4921 小时前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
徐小黑ACG2 小时前
GO语言 使用protobuf
开发语言·后端·golang·protobuf
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
0白露3 小时前
Apifox Helper 与 Swagger3 区别
开发语言
Tanecious.4 小时前
机器视觉--python基础语法
开发语言·python
叠叠乐4 小时前
rust Send Sync 以及对象安全和对象不安全
开发语言·安全·rust
TDengine (老段)5 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
Tttian6225 小时前
Python办公自动化(3)对Excel的操作
开发语言·python·excel