这篇文章来稍微查漏补缺，以下标序号是根据我之前的文章内容标滴，补充。
2.7 其他指令
之前学习的一些指令，在这里拓展学习一下：
事件监听指令v-on： 缩写@，参数$event,修饰符号如下：
- .stop 阻止事件冒泡
- .self 当事件在该元素本身触发时才触发事件
- .capture 添加事件监听器，使用事件捕获模式
- .prevent 阻止默认事件
- .once 事件只触发一次
条件分支指令v-if/v-show： 下面来举例子
<template>
<h1 v-if="isTrue">如果是true则会展示</h1>
<h1 v-show="isTrue">如果是true则会展示</h1>
<button @click="isTrue=!isTrue">改变isTrue</button>
</template>
<script>
export default {
data(){
return{
isTrue:true
}
}
}
</script>
我们会发现，用法一样，当isTrue为false它们一样是消失，诶那到底有什么不同呢？点开控制台我们就知道了，看一下元素。会发现当isTrue为false的时候，v-if控制的元素是真的消失了，而v-show控制的元素还在页面，只不过加了一个display:none
那么既然有v-if 当然也是有v-else和v-else-if的：
<!-- v-else 演示 -->
<template>
<h1 v-if="isTrue">此时isTrue为true</h1>
<h1 v-else>此时isTrue为false</h1> <!-- 我们要注意v-else后面是不需要加任何东西的 -->
<button @click="isTrue=!isTrue">改变isTrue</button>
</template>
<!-- v-else-if 演示 -->
<template>
<h1 v-if="num===1">num=1</h1>
<h1 v-else-if="num===2">num=2</h1>
<h1 v-else>num=3</h1>
<button @click="add">让num+1</button>
</template>
<script>
export default {
data(){
return{
num:1
}
},
methods:{
add(){
this.num===3?this.num=1:this.num++
}
}
}
</script>
以上都很好理解嗷。
循环遍历指令v-for：
- 遍历数组
v-for="(item,[index]) in 数组" - 遍历对象 v-for="(value,[key],[index]) in 对象"
vue中列表循环需要加 :key="唯一标识"，唯一标识可以是item里面的id、index等等，因为vue组件高度复用 增加Key可以标识组件的唯一性， 为了更好的区别各个组件。key的作用主要是为了高效的更新虚拟DOM，使用diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比。
那我之前写的v-for都没有写key，是不好的习惯，最好都要写上：
<template>
<h4>恭喜小智夺冠QAQ</h4>
<ul>
<li v-for="item,index in list" :key="index">{{item}}</li>
</ul>
</template>
<script>
export default {
data(){
return{
list:['皮卡丘','卢卡利欧','快龙','葱油兵','耿鬼','腮鱼龙']
}
}
}
</script>
3.13 组件化开发三要素(prop,自定义,slot)
父子组件之间的通信： 父子组件之间不能相互访问data内容
如果数据从(Patent)父组件传到(Child)子组件就得通过props(属性的意思) 。如果数据从子组件传给父组件就得通过 $emit Events(事件)
3.13.1 父传子props
首先我们创建一个子组件，我这里叫Child.vue,然后把它引入到App.vue中
<template>
<div>
<childCom></childCom>
</div>
</template>
<script>
//引入子组件
import childCom from './components/childCom.vue'
export default {
name:'App',
data(){
return{
toChild:'传给子组件的数据'
}
},
components:{
childCom
}
}
</script>
那么看到里面我要把数据传给子组件展示的话，需要通过props来传递，首先在子组件中接收：
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
props:['msg'] //接收数据
}
</script>
其次在父组件中传递：
<template>
<div>
<!-- msg对应子组件写的msg -->
<childCom msg="hello"></childCom>
</div>
</template>
这样子在页面上就会看到hello了，那么这样是传字符串，怎么传变量呢？像我上面已经在App.vue中写了一个变量toChild，传变量的话应该这么传：
<template>
<div>
<!-- 必须在前面用 : 绑定数据，否则就只能传字符串 -->
<childCom :msg="toChild"></childCom>
</div>
</template>
这样就可以把toChild传过去了！但是如果我们传去子组件的是一个数组，那么子组件应该这么接收：
<script>
export default {
props:['msg']
}
</script>
<!-- 以上是原本的写法，看清楚用的是 [] -->
<script>
export default {
props:{ //这里变成了 {}
list:{
type:Array //告诉它是数组类型
},
msg:{
type:String, //写上我们接收的类型
default:'父组件不传值展示这个', //还能设置缺省值(也就是默认值)
required:true //设置为true，如果父组件不传值，则会提示
},
}
}
</script>
3.13.2 子传父$emit
通常来说是在有事件发生的时候才会把数据传给父组件。比如有多个子组件，我们选择其中一个它会传一个id给父组件让父组1件用这个id去服务器取数据到页面渲染。那我们写个简单的例子，通过子组件按钮使父组件的数字加2：
实际上是 子组件告诉父组件要调用父组件的哪个函数，并可以传参
<!-- App.vue 父组件 -->
<template>
<div>
<h4>通过子组件传过来的消息改变num：{{num}}</h4>
<!-- 下面绑定事件名，是在子组件中$emit定义的，而真正执行的是下面methods内的函数 -->
<childCom @getNumToAdd="add"></childCom>
</div>
</template>
<script>
import childCom from './components/childCom.vue'
export default {
name:'App',
data(){
return{
num:0
}
},
components:{
childCom
},
methods:{
add(addNum){ //这里的addNum会接收到子组件传过来的参数
this.num += addNum
}
}
}
</script>
<!-- childCom.vue 子组件 -->
<template>
<button @click="myNum(2)">子组件</button>
</template>
<script>
export default {
methods:{
myNum(num){
this.$emit('getNumToAdd',num) //这里定义的是在父组件那边要绑定的函数名,可传参
}
}
}
</script>
两部分代码来回看 就能看懂了。总之我自己感觉是有点点绕哈哈哈。
