15--vue自写组件：我的信息页（模板），404页面

小芹儿

于 2020-05-13 21:39:53 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue部分

本文链接：https://blog.csdn.net/xu_ze_qin/article/details/106106578

本文介绍了如何在Vue中创建自定义组件CellItem.vue，详细讲解了组件的结构、事件处理和props的使用。同时，还讨论了404页面的创建和配置，当访问不存在的路由时，展示404页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先在components下面建一个目录CellItem.vue(注意要两个字母大写)如图：
在这里插入图片描述
2、组件要实现的效果：

3、讲一下代码的含义吧~~
外层使用 li 标签来写，click事件是跳转事件；要记得methods方法要在data方法的后面！下面就是有一个img可以引入图片（下面一篇博客讲图片的引入和插槽），v-if判断是否出现，props可以传递静态或动态的值。

<template>
	<li class="cell-item" @click="go">
		<img class="icon" v-if="icon" :src="icon"/>
		<div class="left">
			<template v-if="label">{
   
   {
   
   label}}</template>
			<slot name="label"></slot>
		</div>
		<div class="right">
			<template v-if="value">{
   
   {
   
   value}}</template>
			<slot name="value"></slot>
		</div>
		<i v-if="arrow" class="cubeic-arrow"></i>
	</li>
</template>

<script>
	export default {
   
   
		// props里面的值一定要加引号！！！！！！！
		props: ['label', 'value'