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

相关推荐
巴博尔3 分钟前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城7 分钟前
UniApp 实现双语功能
javascript·vue.js·uni-app
小妖6668 分钟前
vscode 怎么运行 c++ 文件
开发语言·c++
weixin_307779139 分钟前
在 Microsoft Azure 上部署 ClickHouse 数据仓库:托管服务与自行部署的全面指南
开发语言·数据库·数据仓库·云计算·azure
鱼鱼说测试12 分钟前
Linux下运行Jmeter
开发语言·python
鱼鱼说测试20 分钟前
postman功能接口测试
开发语言·lua
Achou.Wang21 分钟前
源码分析 golang bigcache 高性能无 GC 开销的缓存设计实现
开发语言·缓存·golang
绵羊202343 分钟前
R语言绘制热图
开发语言·r语言
会写代码的饭桶1 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中1 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web