组件通信
- 我们已经知道,从父组件向子组件通信,通过 props 传递数据就可以了,但 Vue
组件通信的场景不止有这一种,归纳起来,组件之间通信可以用下图表示。
单向数据流
- 单向数据流是父子组件的核心概念,props是单向绑定的。
- 当父组件的属性发生变化的时候,会传导到子组件。但是反之,为了防止子组件无意间修改来父组件的状态,从下往上的数据流是不允许的。
- 当父组件属性改变时,会传进子组件。而子组件的属性改变时,会报错。
- 这样的话可能觉得props有点鸡肋,只能初始化组件的时候用,在子组件内并不能进行操作。其实还是有两种办法去操作props的:
- 1.定义一个局部变量,并用props初始化它,以后操作这个局部变量。
- 2.定义一个计算属性,处理props的值并返回。
自定义事件
- 了解了组件对单向数据流,我们知道了组件从上至下是通过prop传递进行通信的。那从下往上怎么办呢?
- vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时,定义事件,子组件通过触发这个事件来与父组件进行通信。
子组件→父组件
- 当子组件需要向父组件传递数据时,需要用到自定义事件。
- Vue 组件有一套观察者模式,子组件用 e m i t ( ) 来 触 发 事 件 , 父 组 件 用 emit()来触发事件,父组件用 emit()来触发事件,父组件用on()来监听子组件的事件。
语法结构:
-
父组件通过v-on:eventName="parentEventName"来设置监听
-
子组件通过$.emit(‘eventName’)来触发事件
案例1: -
两种办法去操作props之一,定义一个局部变量,并用props初始化它,以后操作这个局部变量。即父组件传值→子组件保存初始值
-
父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。
-
案例1改写(子组件添加点击事件,维护缓存数据):
-
父组件传值→子组件保存初始值
-
父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改,只用维护childCount,这样可以避免直接操作父组件数据。
-
案例1改写(不再维护缓存数据,开始影响父组件数据):
步骤: -
①子组件通过$emit(‘eventName’,option)来触发事件
-
②父组件通过v-on:eventName="parentEventName"来设置监听
①子组件触发事件$emit(‘eventName’,option)
- ②父组件设置监听v-on:eventName="parentEventName"并接收参数
- 案例1小结:
- 使用事件抛出值:
- 有的时候用一个事件来抛出一个特定的值是非常有用的,这时可以使用 $emit 的第二个参数来提供这个值
- 案例2:点击按钮关闭
案例2:点击按钮关闭 - ①子组件触发事件$.emit(‘eventName’,option)
②父组件设置监听v-on:eventName=“parentEventName”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义事件</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="demo">
父组件:{{number}}
<my-component :num='number' @pass-number='aaFn'></my-component>
</div>
</body>
<script type="text/javascript">
Vue.component('my-component',{
props:['num'],
template:`
<button @click='addChlid'>子组件点击次数{{childNumber}}</button>
`,
methods:{
addChlid(){
this.childNumber++;
/*子组件传递*/
this.$emit('pass-number',this.childNumber)
}
},
data:function(){
return{
childNumber:this.num
}
}
});
/*实例化vue*/
var demo = new Vue({
el:'.demo',
data:{
number:6
},
methods:{
aaFn(option){
console.log(option)
this.number = option;
}
},
computed:{
}
})
</script>
</html>
以上是小编对VUE之组件(组件通信、单向数据流)的见解,如有疑问请随时联系小编!