Vue（八）-- eslint,组件间通信和代码
目录
node.js下载慢的解决方法
npm install -g serve --registry=https://registry.npm.taobao.org
在后面加上--registry=https://registry.npm.taobao.org使用国内的镜像地址即可
参考链接(https://blog.csdn.net/hicoldcat/article/details/53009251?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-6&spm=1001.2101.3001.4242)
1.ESlint
- 课程链接：(https://www.bilibili.com/video/BV1hb411K7Ud?p=21&spm_id_from=pageDriver)
- ESLint是一个代码规范检查工具
- 它定义了很多特定的规则，一旦你的代码违背了某一规则，eslint会做出非常有用的提示
- 官网：http：//eslint.org/
- 基本已经代替了以前的JSLint
- 关闭一个规则：indent
2.组件的定义和使用
3.组件间通信
- App.vue中定义了数组值想要传递给调用的组件应该如何显示？
- 数据存放分析：
如果是某一个组件操作数据，该数据就放在该组件中
如果是多个组件都要操作数据，那么数据就放在父组件中
组件：(https://cn.vuejs.org/v2/guide/components-props.html)
--3.1组件间通信1--通过props：
----3.1.1数据发送方
- step1
在data中定义变量、属性、对象、数组或者在methods中定义方法
- step2
在components映射好的标签中绑定定义好属性方法等
----3.1.2数据接收方
官方API文档(https://cn.vuejs.org/v2/api/#props)
-
props：声明接收属性，这个属性就会成为组件对象的属性
- 写法一：props：['comment']//这种方式只指定了属性名
- 写法二：较详细 //指定了属性名和属性值的类型
props:{
comment:object
}
- 写法三：更详细,//指定属性名/属性值的类型/必要性
props{
addComment:{
type:Function,
required:true
}
}
----3.1.3注意
- 此方法用于父组件向子组件传递数据
- 所有标签属性都会成为组件对象的属性，模板页面可以直接应用
- 弊端：
- 如果需要向非之后带传递数据必须多层逐层传递
- 兄弟组件间也不能直接props通信，必须借助父组件才可以
--3.2组件间通信2：vue自定义事件
- 用于子组件向父组件通信
- 可以代替传递函数的形式
----3.2.1父组件：
-
方法一使用v-on绑定回调函数addTodo事件监听
-
方法二：使用$on(),和mounted
----3.2.2子组件：
去掉props中的引入，父组件方法的调用
使用$emit触发自定义事件
- this.$emit('addTodo',todo)
指定父组件中的方法‘addTodo’，传递参数todo
--3.3组件间通信3：消息订阅与发布（PubSubJS库）
- 下载该库
npm.taobao.org
- 发布和订阅在组件间的消息传递，组件不一定是父子关系，同级关系也可以
- 该库向外提供了两个对象，有两个方法subscribe和publish
- 两个组件都需要引入pubsub-js
import PubSub from 'pubsub-js'
-
订阅消息--父组件
PubSub.subscribe('msg',function(msg,data){})
-
发布消息--子组件
PubSub.publish('msg',data)
-
优点：此方法可以实现任意关系组件间通信（数据）
-
两个重要操作
- 绑定事件监听（订阅消息）
- 目标：标签元素
- 事件名(类型):click/focus
- 回调函数：function（event）{}
-
触发事件（发布消息）
- DOM事件：用户在浏览器上对应的界面上做对应的操作
- 自定义：编码手动触发
--3.4组件间通信4：slot（插槽）
-
是标签通信，而以上几种是数据通信
-
此方式用于父组件向子组件传递‘标签’
-
适用于组件标签被反复用到
-
在父组件中
-
在子组件中
-
注意子组件原来的方法都要定义在父组件中
-
理解：在需要插入的子模块中留下插槽，通过slot中的属性值来进行对接
--代码
- App.vue中的内容
<template>
<div>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>请发表对React的评论</h1>
</div>
</div>
</div>
</header>
<div class="container">
<Add :addComment="addComment" />
<List :comments="comments" :deleteComment="deleteComment" />//逐层声明App->List->Item
</div>
</div>
</template>
<script>
import Add from './components/Add.vue'
import List from './components/List.vue'
export default {
data() {
return {
comments: [ //数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件
{
name: 'BOB',
content: 'Vue 还不错'
},
{
name: 'Cat',
content: 'Vue so Easy'
},
{
name: 'BZ',
content: 'Vue so so'
}
]
}
},
methods: { //需要将此方法传递给子组件Add.vue
//添加评论
addComment(comment) {
this.comments.unshift(comment)
},
//删除指定下标的评论
deleteComment(index) {
this.comments.splice(index, 1)
}
},
components: {
Add,
List
}
}
</script>
<style>
</style>
List.vue想要收到父组件传递的数据必须要声明接收属性:这个属性就会成为组件对象的属性
<template>
<div class="col-md-8">
<h3 class="reply">评论回复：</h3>
<h2 v-show="comments.length===0">暂无评论，点击左侧添加评论！！！</h2>
<ul class="list-group">
<Item v-for="(comment,index) in comments" :key="index"
:comment="comment" :deleteComment="deleteComment"
:index="index"(传递index给Item用于删除定位)/>
</ul>
</div>
</template>
<script>
import Item from './Item.vue'//引入Item组件
export default{
//声明接收属性:这个属性就会成为组件对象的属性
props:['comments','deleteComment'],//这种方式只是指定了属性名
components:{
Item //映射Item组件
}
}
</script>
<style>
.reply {
margin-top: 0px;
}
</style>
Item.vue
<template>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;" @click="deleteItem">delete</a>
</div>
<p class="user"><span>{{comment.name}}</span><span>说</span></p>
<p class="centence">{{comment.content}}</p>
</li>
</template>
<script>
export default {
//声明接收属性:这个属性就会成为组件对象的属性
props: { //指定属性名和属性值的类型
comment: Object,
deleteComment: Function,
index: Number
},
methods: {
deleteItem() {
const {
comment,
index,
deleteComment
} = this
if (window.confirm("确定删除${comment.name}的评论吗？")) {
deleteComment(index)
}
}
}
}
</script>
<style>
li {
transition: .5s;
overflow: hidden;
}
.handle {
width: 40px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top: 1px;
text-align: center;
}
.handle a {
display: block;
text-decoration: none;
}
.list-group-item .centence {
padding: 0px 50px;
}
.user {
font-size: 22px;
}
</style>
- 从绑定事件监听开始做起
Add.vue
