Date2021-06-09 By WJB
Vue框架中强调单向数据流。对于 Vue 来说,组件之间的数据传递具有单向数据流这样的特性。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子 组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为 最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做 了,Vue 会在浏览器的控制台中发出警告。
那么如何显示子组件向父组件发送数据呢?答案:事件(event);
子组件 item.vue,通过 this.$emit("active",'params');发送向父组件发送信号, active是自定义事件的名称,可以根据需要自己定义;params 是传递的参数可以自己定义。
<template>
<div class="item" :class="{ active: isActive }" @click="handleClick">
<!-- 插槽 -->
<slot></slot>
</div>
</template>
<script>
export default {
props:{
isActive:{
type:Boolean, //限制属性类型
required:true, //约束该属性必须传递
default: true,//默认属性
},
},
methods: {
handleClick(){
// active是自定义事件的名称,可以根据需要自己定义
// params 是传递的参数可以自己定义
// this.$emit() 事件信号发送 通知父组件
this.$emit("active",'params');
},
},
}
</script>
/*scoped 表示局部,解决样式冲突*/
<style scoped>
.active{
background:#e7e7e7;
}
.item{
cursor: pointer;
width: 100%;
height: 100%;
transition:0.5s;
}
.item:hover{
background: #f4f4f4;
}
</style>
父组件 app.vue,父组件要注册事件接收子组件通知,注册方式与常规事件一样 @+事件名称,及代码中 @active="curActive='dongman'" 语句。
<template>
<div>
<div style="width:100px; height:50px; border:2px solid" >
<!--active 子父组件自定义事件,子组件 发送信号后 即可执行“curActive='dongman”,这句代码
也可以调用事件-->
<Item :isActive="curActive==='dongman'" @active="curActive='dongman'" >
动漫
</Item>
</div>
<div style="width:100px; height:50px; border:2px solid" >
<Item :isActive="curActive==='dianying'" @active="curActive='dianying'" >
电影
</Item>
</div>
</div>
</template>
<script>
import Item from './components/item'
export default{
components:{
Item,
},
data()
{
return{
curActive:"dongman"
}
},
}
</script>
获取源码地址:
源码说明,需要安装node,vue ,npm;源码中没有带带三方依赖库,所以要在当前文件夹执行 npm install 命令。