9. Vue3.x中的单文件组件定义组件注册组件以及组件的使用

Z时代
2024-01-10
分类：综合

vue

一、Vue3.x 中的组件

组件可以拓展html标签，解决html标签构建应用的不足，Vue项目由一个一个的组件组成。

二、Vue3.x 中定义组件注册组件

1、定义一个公共的头部组件 components/header.vue

<template>
<header>我是一个头部组件</header>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
// scoped表示css是一个局部作用域
header {
    width: 100%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    background: #000;
    color: #fff;
}
</style>

2、定义一个公共的头部组件 components/Home.vue

<template>
<v-header />
<h5>{{title}}</h5>
<button @click="getTitle()">获取home组件里面的title</button>
</template>
<script>
import Header from './Header'
export default {
    data() {
        return {
            title: "首页组件title"
        }
    },
    methods: {
        getTitle() {
            alert(this.title)
        }
    },
    components: {
        "v-header": Header
    }
}
</script>
<style lang="scss">
h5 {
    text-align: center;
}
</style>

2、定义一个公共的头部组件 components/User.vue

<template>
<header>我是用户组件的头部</header>
<br>
<ul>
    <li v-for="(item,index) in list" :key="index">
        {{item}}
    </li>
</ul>
</template>
<script>
export default {
    data() {
        return {
            list: []
        }
    },
    mounted() {
        for (var i = 0; i < 10; i++) {
            this.list.push(`我是第${i}条数据`)
        }
    }
}
</script>
<style lang="scss">
ul {
    list-style: none;
}
</style>

2、引入自定义组件、注册组件、使用组件

<template>
<Home />
<br>
<hr>
<br>
<User />
</template>
<script>
//1、引入组件
import Home from './components/Home';
import User from './components/User';
export default {
    data() {
        return {
            msg: "app根组件",
        };
    },
    components: { //2、挂载组件
        Home,
        User
    }
};
</script>
<style lang="scss">
h2 {
    text-align: center;
}
</style>