2025年【VUE】- 前端封装之父子组件传值

编程汇总 • 2025-09-25 19:51 • 阅读 55

前端代码进行抽象与封装离不开父子组件传值问题，做的过程中总有梳理不清楚的时候，在此总结一波，一方面是自己梳理梳理思路，另外一方面有需要的伙伴们也可以瞅一瞅，本文是从开始到最后实现数据的一个操作过程；

父组件向子组件传值

1、可抽离的静态页面

首先是看一下自己的静态页面有哪些相似之处可以被抽象出来，如下面这个页面，看似不一样，实则都是一样的，只是图标和文字内容不一致，OK了解后我们可以开始设计静态页面啦；



    

    显示单词

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. 父组件-动态绑定数据（子组件需要的数据）

子组件-显示父组件传过来的数据



    

    {

  

  {allColumnsTitle}}

到此父组件向子组件传值的过程已经完成,接下来是子组件向父组件传值；

子组件向父组件传值

1、子组件：

  

    
      v-model="isTrue"

      @change="selectSwitch"

    />

// 子组件向父组件传值

    selectSwitch(){ 

   

      this.childIsTrue=this.isTrue;

      this.$emit("listenToChild",this.childIsTrue);

    }

2、父组件：

// 接收子组件传值，绑定

@listenToChild="changeValue"

changeValue(){ 

   

},

注意：changeValue()默认参数为子组件传递过来的参数，当我们再传递参数时就会覆盖子组件传递过来的参数

父子组件传值的梳理到此告一段落，个人学习及使用的总结，哪里理解偏差的，一起交流学习；

2025年【VUE】- 前端封装之父子组件传值

相关推荐