App.vue中引入自定义组件

夏天的冬雪2024-01-04 15:33

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