- 当前位置：首页 >综合 >前端框架Vue—父子组件数据双向绑定
前端框架Vue—父子组件数据双向绑定
发布时间：2025-11-05 11:53:24 来源：云智核 作者：域名
Vue项目中经常使用到组件之间的前端数值传递，实现的框架方法很多，但是组件原理上基本大同小异。
实现思路：
父 向 子 组件传值：使用 props 属性。数据双( props 是绑定property[属性] 的复数简写 )
子 向 父 组件传值：使用自定义事件。
一、前端父子组件单向传值
1.1、框架父向子传值
父向子组件传值，组件子组件接收到数据之后，数据双保存到自己的绑定变量中。
//父组件写法 <cld :numP="num" ></cld> //子组件定义以及数据 components:{ cld:{ template:#child,前端 props:{ numP:Number }, } } //子组件内容 <template id="child"> <div> {{ numP }} </div> </template>props 用于接收父组件传过来的值，props 的b2b信息网框架写法有很多种，具体如：
//方式1 ： 直接接收数据 props: [ numP ] //方式2： 加类型限制 props: [ numP: Number ] //方式3：添加默认值 props: [ numP: { type:Number,组件 default:0 } ] //方式4：是否必须值限制 props: [ numP: { type:Number, default:0, require:true //添加必须值，不传此值会报错 } ] //方式5：采用对象形式 props: { numP: { type:Number,数据双 default:0, } }1.2、子向父传值
子向父组件传值，绑定主要通过自定义事件进行传值，具体实例如下：
// 父组件内容 <div> 子组件获取到的数据{{getNum}} <cld :numb="num" @accept="getNumC"></cld> </div> //父组件方法 methods:{ getNumC(data){ this.getNum = data //接收子组件传的数据 } }, //子组件定义 components:{ cld:{ template:#child, data(){ return{ numC:1314 //子组件数据定义 } }, mounted(){ this.$emit( accept , this.numC ) // 触发自定义事件 } } },二、父子组件数据双向绑定
Vue 的数据都是单向流动的，而且 vue 中从来就没有任何的双向绑定，v-model 实现的双向绑定只是语法糖而已。云服务器
方式1：利用 watch 实现父子组件的数据双向绑定，具体实例如下：
<div id="app"> 数据<br>{{num}} <input type="text" v-model="num"><br> <cld :numb="num" @accept="getNumC"></cld> </div> //子组件内容 <template id="child"> <div> 数据<br>{{childNum}} <input type="text" v-model="childNum" /> </div> </template> <!-- 父子组件通信 --> const app = new Vue({ el:#app, data:{ num:520, }, methods:{ getNumC(data){ this.num = data } }, components:{ cld:{ template:#child, props:{ numb:String }, data(){ return{ childNum:0, } }, watch:{ numb:function(){ this.childNum = this.numb }, childNum:function(){ this.$emit(accept,this.childNum) } }, mounted(){ this.childNum = this.numb } } } })方式2：.sync 修饰符实现双向绑定
在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。(数据自上而下流，事件自下而上走)
<cld :numb.sync="num" ></cld> //会扩展为： <cld :numb="bar" @update:numb=”val => bar = val”/>当组件需要更新 numb 的值时，需要触发更新事件：
this.$emit("update:numb", newValue );使用具体实例如下：
// 父组件 <Father :foo.sync="foo"></Father> //子组件 props: [foo], data() { return { newFoo: this.foo; } }, methods:{ add:function(){ this.newMsg=10; this.$emit(update:foo,this.newFoo); } }亿华云益华科技服务器租用源码下载IT技术网IT资讯网企商汇源码库香港云服务器益强IT技术网益强前沿资讯益强科技汇智坊益华科技益强科技思维库亿华云计算多维IT资讯极客编程亿华云智能时代益华科技技术快报运维纵横云站无忧全栈开发科技前瞻益强智囊团IT资讯网益强编程舍编程之道极客码头亿华科技益强智未来益强资讯优选亿华智造创站工坊亿华灵动云智核码上建站益强编程堂益华IT技术论坛码力社亿华互联
- Copyright © 2025 Powered by 前端框架Vue—父子组件数据双向绑定,云智核 滇ICP备2023006006号-28sitemap