vue-cli单文件组件的简单应用

一、简介

为了更好地理解单文件组件的使用以及巩固vue的基础知识,写了一个简单的评论系统

二、功能实现

1、组件的划分

实现步骤分为两个部分:静态页面的实现 动态功能的实现

1)、静态页面的划分

静态页面主要分为三个部分:红框的为父组件,即App;绿框的为添加组件Add;黄框的为评论显示组件List。

在这里插入图片描述

2)、动态功能的实现

这里的功能很简单,即添加、动态显示和删除一个评论数组。用到了点击函数和父子间的数据交流
注意:这里为了操作的简便,将数据和操作数据的函数均放到父组件中

2、组件的使用

组件的使用分为以下三个步骤:
1、引入组件
2、渲染组件
3、使用组件
下面详细说明:

1)、引入组件

在引入组件之前,需注意组建的基本结构

<template>    //这里写页面结构,注意要用一个div包裹起来
	<div>
	</div>
</template>

<script>
	export default {  //这里写vue的实例对象,可匿名
	                  //注意data必须为函数,防止修改时相互影响
		}
</script>

<style>
</style>

在vue-cli中,每一个组件均是一个vue文件,放在components文件夹下,若想使用子组件,则需要在父组件中
import+组件名+from+组件路径

例如:在入口文件中引入父组件

import App from './App'

2)、渲染组件

与局部组件相同,一般使名称和引入组件名相同,可缩写

export default {
	components: {
				Add,  //缩写前 Add:Add;
				List
			}
}

3)、使用组件

在父组件合适的位置中使用,下面为一个引入<Item>组件完整的实例

<template>
	<div id="list">
		<Item ></Item>
	</div>
</template>

<script>
	import Item from './Item.vue'
	export default {
		components: {Item}
	}
</script>

<style scoped="scoped">
</style>

3、功能的实现

1) 、添加评论

评论为一个对象数组,是一组数据

export default {
		data() {
			return {
				comments: [
					{
						name:'Bob',
						content:'Vue大法好'
					},
					{
						name:'Kat',
						content:'Vue还不错'
					}
				]
			}
		},
	}

添加数据即在Add组件中给‘提交’按钮一个点击函数,并使用输入框的v-model获取数据。
但由于上面说过,将数据和操作数据的函数均放在父组件中,则会用到父子组件的交流,将父组件数组添加函数传给子组件让子组件完成。

  1. 在父组件中定义好数据和添加函数:
		export default {
		data() {
			return {
				comments: [
					{
						name:'Bob',
						content:'Vue大法好'
					},
					{
						name:'Kat',
						content:'Vue还不错'
					}
				]
			}
		},
		methods:{
			//添加评论
			addComment(comment) {
				this.comments.unshift(comment);
			},
			//删除指定评论
			deleteComment(index) {
				this.comments.splice(index,1);
			}
		},
		components: {
			Add,
			List
		}
	}

  1. 将添加数据的方法传给子组件
<Add :addComment="addComment"></Add>
  1. 子组件通过props接收方法并完成操作
export default {
		data() {
			return {      //初始化输入的对象
				name:'',
				content:''
			}
		},
		props:{          //获取父组件的添加函数
			addComment: {
				type:Function,
				required:true
			}
		},
		methods: {
			add() {   //提交按钮的click函数
				//1.检查输入的合法性
				const name = this.name.trim();
				const content = this.content.trim();
				if(!name){
					alert('用户名不能为空');
					return
				}
				if(!content){
					alert('内容不能为空');
					return
				}
				//2.通过输入的内容产生一个comment对象
				const comment = {
					name,
					content
				};
				//3.添加到comments对象数组中
				this.addComment(comment);
				//4.清除输入
				this.name = '';
				this.content = '';
			}
		}
	}

2)、显示评论

在List组件中,通常在 li 中用v-for动态显示数组
这里将 li 封装成一个组件<Item>,于是改为在 Item中用v-for动态显示,但其中的comment和index均是List组件中的数据,所以要将其传给子组件Item

<ul>
	<Item v-for="(comment,index) in comments" :key="index" :comment="comment" :deleteComment="deleteComment" :index="index"></Item>
</ul>

3)、删除评论

删除评论的方法与增加新评论类似,将指定index的数据用splice方法剪切
注意需将App中的删除函数传给List,在传给Item,须逐层传递

发布了5 篇原创文章 · 获赞 0 · 访问量 93
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览