vue3不使用eslint vue取消eslint规范

目录

• node.js下载慢的解决方法
• 1.ESlint
• 2.组件的定义和使用
• 3.组件间通信

• --3.1组件间通信1--通过props：

• ----3.1.1数据发送方
• ----3.1.2数据接收方
• ----3.1.3注意

• --3.2组件间通信2：vue自定义事件

• ----3.2.1父组件：
• ----3.2.2子组件：

• --3.3组件间通信3：消息订阅与发布（PubSubJS库）
• --3.4组件间通信4：slot（插槽）
• --代码

node.js下载慢的解决方法

npm install -g serve --registry=https://registry.npm.taobao.org 在后面加上--registry=https://registry.npm.taobao.org使用国内的镜像地址即可
参考链接()

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