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

相关推荐
蒙娜丽宁2 分钟前
Rust 并发编程进阶:线程模型、通道通信与异步任务对比分析
开发语言·网络·rust
绝无仅有3 分钟前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
又是忙碌的一天34 分钟前
java字符串
java·开发语言
Hi2024021734 分钟前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
chxii36 分钟前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
Teable任意门互动1 小时前
主流多维表格产品深度解析:飞书、Teable、简道云、明道云、WPS
开发语言·网络·开源·钉钉·飞书·开源软件·wps
没逛够1 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
程序员大雄学编程1 小时前
「用Python来学微积分」16. 导数问题举例
开发语言·python·数学·微积分
Dreams_l2 小时前
redis中的数据类型
java·开发语言
梵得儿SHI2 小时前
Java IO 流详解:字符流(Reader/Writer)与字符编码那些事
java·开发语言·字符编码·工作原理·字符流·处理文本