Vue 父子通信之父子数据的双向绑定

最新推荐文章于 2024-07-24 09:44:18 发布
最新推荐文章于 2024-07-24 09:44:18 发布
阅读量124 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62197289/article/details/124908026
版权
子组件的接收值修改

1.用 v-model 绑定propos中的接收

2.将propos接收值 赋值给子组件的数据后 修改子组件的数据

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <script src="vue.min.js"></script> 
</head> 
<body> 
 
    <div id="vue"> 
    <use_fu :zi_receive_1="fu_message_1"  ></use_fu>
    <hr>
    <hr>
   父组件数据： {{fu_message_1}}
</div> 
    <template id="q1">
        <div>
            <!--  使用v-model绑定接收的数据
                修改接收的数据 
                不修改父子组件里面的数据
                    -->
          <h3>data：{{zi_message_1}}</h3> 
          <h3>props：{{zi_receive_1}}</h3> 
          input_model_zi_receive-1:  
          <input type="text" v-model="zi_receive_1">
         
         
         
         <!-- 在子组件数据中 使用数据接收 props从父组件传来的数据
             使用 v-model绑定子组件数据  只修改子组件的数据   接收的数据不保留-->

             <!-- 一般化从父组件里面直接接收的数据是不改变的
                 在接收后赋值给 子组件里面的数据后 直接对子组件里面的数据进行修改 -->
          <hr>
          input_model_zi_message2  
          <input type="text" v-model="zi_message_2">
          <p></p>
        data:<h2>{{zi_message_2}}</h2>
         props:<h2>{{zi_receive_1}}</h2>
          <hr>
        </div>
    </template>
 <script> 
 
 const q1={
     template:'#q1',
     data() {
         return {
             zi_message_1:'子组件里面数据',
             zi_message_2:this.zi_receive_1,
         }
     },
     props:['zi_receive_1','zi_receive_2'],
 }
   const vu = new Vue({ 
      el: '#vue', 
      data: { 
          fu_message_1:'这是父组件里面的数据——1',
          fu_message_2:'这是父组件里面的数据——2'
      },
      components:{
          use_fu:q1
      }
        }) 
        document.qs
    </script> 
</body> 
</html>
修改接收值而修改父数据

将子传父 套入

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <script src="vue.min.js"></script> 
</head> 
<body> 
 
    <div id="vue"> 
    <use_fu :zi_receive_1="fu_message_1"  ></use_fu>
    <hr>
    <hr>
   父组件数据： {{fu_message_1}}
</div> 
    <template id="q1">
        <div>
            <!--  使用v-model绑定接收的数据
                修改接收的数据 
                不修改父子组件里面的数据
                    -->
          <h3>data：{{zi_message_1}}</h3> 
          <h3>props：{{zi_receive_1}}</h3> 
          input_model_zi_receive-1:  
          <input type="text" v-model="zi_receive_1">
         
         
         
         <!-- 在子组件数据中 使用数据接收 props从父组件传来的数据
         使用 v-model绑定子组件数据  只修改子组件的数据   接收的数据不保留-->

             <!-- 一般化从父组件里面直接接收的数据是不改变的
        在接收后赋值给 子组件里面的数据后 直接对子组件里面的数据进行修改 -->
          <hr>
          input_model_zi_message2  
          <input type="text" v-model="zi_message_2">
          <p></p>
        data:<h2>{{zi_message_2}}</h2>
         props:<h2>{{zi_receive_1}}</h2>
          <hr>
        </div>
    </template>
 <script> 
 
 const q1={
     template:'#q1',
     data() {
         return {
             zi_message_1:'子组件里面数据',
             zi_message_2:this.zi_receive_1,
         }
     },
     props:['zi_receive_1','zi_receive_2'],
 }
   const vu = new Vue({ 
      el: '#vue', 
      data: { 
          fu_message_1:'这是父组件里面的数据——1',
          fu_message_2:'这是父组件里面的数据——2'
      },
      components:{
          use_fu:q1
      }
        }) 
        document.qs
    </script> 
</body> 
</html>
晚风江上吟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现父子双向通信
骑着毛驴的小猴子
08-28 571
父组件通过props向子组件传递数据 子组件用emit向父组件传递数据 父子组件同时操作同一个数，进行加运算与减运算 子组件 counter.vue <template> <div> <button v-on:click=increament>+</button> <button @click=decreament>-</button> <p>
通过proxy和defineProperty实现v数据双向数据绑定
qq_44777678的博客
01-29 262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
vue中父子组件双向数据绑定
lthlth2010的博客
07-03 346
父组件：&lt;template&gt;&lt;div v-for = "(widget, wIndex)" incontainer.widgets :key = "widget.data.id"&gt;&lt;component:editable="editable" :index="index" :wIndex="wIndex" v-model="widg
vue父子之间通信的双向绑定
weixin_53248537的博客
06-15 132
1.v-model 子组件中的props中定义的属性名为value,触发事件this.$emit('input',实参),此时父组件的子组件标签里就可以用v-model,除非在子组件de
vue小知识~实现父子组件双向数据绑定
qq_31539817的博客
07-01 643
vue的数据是单向数据流动，在子组件中是不可以修改父组件的数据的，但是还是可以通过其他方式间接修改父组件的数据。 案例：子组件是一个按钮组件，分别有两个按钮，一个按钮表示男，标识符为0，另一个按钮是女，标识符是1。父组件定义一个标识，用于显示子组件按钮选中后标识符。 1，方式一：通过向子组件传递方法 ...
详解vue中的父子传值双向绑定及数据更新问题
10-16
主要介绍了vue中的父子传值双向绑定及数据更新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue父子组件双向绑定传值的实现方法
01-19
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的 v-model 了，例如 <input type=text /> 它会响应表单元素的...
Vue使用.sync 实现父子组件的双向绑定数据问题
10-17
主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下
vue.js父子组件通信动态绑定的实例
01-19
如下所示： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <!--这里的作用是将父组件渲染到页面上--&... <div>
Vue中利用v-model实现父子组件间的双向通信
weixin_38098192的博客
06-11 4464
https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model 我们常在input上使用双向数据绑定，实现更新view的时候，model的数据也自动被更新了，model更新的时候，view也自动更新。 如果我们在自定义组件中使用v-model，来实现实例和组件间的双向数据绑定。 v-model的绑定原理： v-model的语法糖： ...
Vue-关于父子间通信双向绑定
上进学长
09-24 106
todo
vue3中父子组件的双向绑定defineModel详细使用方法
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-24 1595
组件之间通讯，通过 props 和 emits 进行通讯，是单向数据流， 子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。 为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API
vue组件中父子传值双向绑定
人间草木
04-21 1518
效果图 父组件页面 父组件页面引用子组件 父组件用 :parentmessage.sync="hphm" 传递 hphm 给子组件并接收子组件更新过的 hphm <its-hphmInput class="filter-input" glbm="京" size="small" v-model="searchFrom.hphm" @onChange="hphmToU...
Vue2.0父子组件之间的双向数据绑定问题解决方案
weixin_33991727的博客
02-01 117
对于vue 1.0项目代码，如果把vue换成vue 2.0，那么之后项目代码就完全奔溃不能运行，vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定，很遗憾。 解决方案只有两种： 1)父子组件之间通过vue事件机制传递数据，这太麻烦，而且可能会遇到问题。 2)不用父子组件方式，直接在父组件写template，这就放弃了组件机制，倒退回到传统编程方式，因为组件机制不行。...
vue2 父子组件双向数据绑定
weixin_42792402的博客
05-12 393
vue2 父子组件双向数据绑定前言父组件子组件说明 前言 vue2本身没有双向数据绑定，父子组件交互通过单向数据实现交互，因此需要变通 父组件 //html部分 <VInput :input-data="name" @data="dataChange" ></VInput> //js部分 data() { return { name: "111", }; }, methods: { dataChange(op) {
父子通信结合双向绑定(拆分双向绑定向父组件发送数据)
407指导员
12-24 181
父子通信结合双向绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :cnum1="num1" :cnum2="num2"></cpn> </div> <te
Vue 父子组件实现数据双向绑定效果的两种方式
热门推荐
shijialeya
06-07 2万+
Vue 父子组件实现双向绑定效果的两种方式
vue父子组件之间双向数据绑定的三种方式(vue2/vue3)
ICanWin_lll的博客
11-12 1万+
在做项目的过程中，经常遇到父子组件通信的问题，现在对3种通信方式总结一下： 一、prop向下传递，emit向上传递 初始版本 父组件通过prop将数据传递给子组件，子组件通过emit事件将子组件数据传递给父组件 //父组件 <template> <div> <child :value='value' @getChildData='getChildData'></child> 来自子组件的数据：&lt.
Vue父子组件间数据的双向绑定
呆呆papa的博客
12-03 4640
在vue中数据的流向通常是单向的，但是实际开发中，存在父子组件都需要对父组件值进行更新的情况，vue提供了两种方法实现数据的双向绑定： 在父组件上 v-model 会利用子组件名为 value 的 prop 和名为 input 的事件，父组件上的值的改变通过 value 传递到子组件，子组件的改变通过 emit 触发 input 事件传递回去。 子组件代码如下： 此外，vue 组件提供了 model 属性，可以修改 v-model 在子组件中 prop 对应值和事件名，将 input 事件修改为其他事件。
vue父子组件数据双向绑定
08-23
在 Vue 中，父子组件之间可以通过 props 和 events 实现数据的双向绑定。具体的步骤如下： 1. 在父组件中定义一个数据，并将其作为 props 传递给子组件： ```vue <template> <div> <child-component :message="message" @update-message="updateMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: '' }; }, methods: { updateMessage(value) { this.message = value; } } }; </script> ``` 2. 在子组件中使用 props 接收父组件传递的数据，并使用 $emit 方法触发一个自定义的事件来通知父组件更新数据： ```vue <template> <div> <input type="text" v-model="childMessage" @input="updateParentMessage"> </div> </template> <script> export default { props: ['message'], data() { return { childMessage: this.message }; }, methods: { updateParentMessage() { this.$emit('update-message', this.childMessage); } }, watch: { message(newValue) { this.childMessage = newValue; } } }; </script> ``` 在上述示例中，父组件通过 :message="message" 将自己的 message 数据以 props 的方式传递给子组件。子组件接收到这个父组件的 message 数据后，使用 v-model 绑定到一个本地的 childMessage 变量上。当子组件中的输入框内容发生变化时，通过 @input 事件触发 updateParentMessage 方法，该方法使用 $emit 触发自定义事件 'update-message' 并将子组件的 childMessage 数据作为参数传递给父组件。父组件接收到这个事件后，触发 updateMessage 方法来更新自己的 message 数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值