大家好，又见面了，我是你们的朋友全栈君。
前端代码进行抽象与封装离不开父子组件传值问题，做的过程中总有梳理不清楚的时候，在此总结一波，一方面是自己梳理梳理思路，另外一方面有需要的伙伴们也可以瞅一瞅，本文是从开始到最后实现数据的一个操作过程；
父组件向子组件传值
1、可抽离的静态页面
首先是看一下自己的静态页面有哪些相似之处可以被抽象出来，如下面这个页面，看似不一样，实则都是一样的，只是图标和文字内容不一致，OK了解后我们可以开始设计静态页面啦；
<div class="settingListSwitch">
<img class="settingLogoSwitch" src="../../public/settings/显示.png"/>
<span class="words">显示单词</span>
<van-switch size="24px" class="switchSwitch" />
</div>
2、父组件操作
//引入子组件
import momoTemplate from "../../components/momoTemplate.vue";
//注册子组件
export default{
components:{ momoTemplate }
}
//引入常量js-传入数据
import { settingData, settingSwitchData } from "../../Entity/settingDataEntity";
所引入JS：import { settingData, settingSwitchData } from “…/…/Entity/settingDataEntity”;其中的“settingData”“settingSwitchData”,是我们Js中传出来的变量
3、显示数据
- 在props中写子组件需要的属性
export default {
props:{
// 显示文本
allColumnsTitle:{default: "延迟跳转"},
//显示开关
allColumnsSwitch:{default:"0"},
//开关状态
isTrue:{default:"false"},
//显示图标
arrowIcon: { default: require("../../public/settings/右.png") },
},
与js数据中的值相对应
2. 父组件-动态绑定数据（子组件需要的数据）
<template>
<momoTemplate
v-for="(item,index) of settingSwitchData"
:key="index"
:settingLogoSwitch="settingSwitchData[0].arrowIcon"
:allColumnsTitle="settingSwitchData[0].allColumnsTitle"
:isTrue="settingSwitchData[0].isTrue"
>
</momoTemplate>
</template>
- 子组件-显示父组件传过来的数据
<div class="settingListSwitch">
<img class="settingLogoSwitch" :src="settingLogoSwitch"/>
<span class="words">{
{allColumnsTitle}}</span>
<van-switch v-model="isTrue" size="24px" class="switchSwitch" />
</div>
到此父组件向子组件传值的过程已经完成,接下来是子组件向父组件传值；
子组件向父组件传值
1、子组件：
<di>
<van-switch
v-model="isTrue"
@change="selectSwitch"
/>
</div>
// 子组件向父组件传值
selectSwitch(){
this.childIsTrue=this.isTrue;
this.$emit("listenToChild",this.childIsTrue);
}
2、父组件：
// 接收子组件传值，绑定
@listenToChild="changeValue"
changeValue(){
},
注意：changeValue()默认参数为子组件传递过来的参数，当我们再传递参数时就会覆盖子组件传递过来的参数
父子组件传值的梳理到此告一段落，个人学习及使用的总结，哪里理解偏差的，一起交流学习；
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/145738.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
