vue（子组件和父组件的双向邦定）

最新推荐文章于 2023-03-08 17:27:00 发布
最新推荐文章于 2023-03-08 17:27:00 发布
阅读量112 收藏
点赞数
分类专栏： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/103356532
版权
前端 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
vue
35 篇文章 0 订阅
订阅专栏

本案例先将父组件的data传到子组件，然后子组件通过input的数据双向绑定（当修改输入框内容时，子组件的数据也同步修改），然后再把子组件输入的值传给父组件（  const qpp=vue（{.....}））的data，同时第一个数据是第二个的100倍，第二个数据是第一个的一百分之一。

运行结果

 

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<cpn :number1="num1" :number2="num2" @num1input="num1input" @num2input="num2input"></cpn>
        </div> 
		<template id="cpn">
			<div>
				props:{{number1}}
				data:{{dnum1}}
				<!--<input type="text" v-model="dnum1" />-->
				<input type="text" :value="dnum1" @input="num1input" />
				props:{{number2}}
				data:{{dnum2}}
				<input type="text" :value="dnum2" @input="num2input"  />
			</div>
		</template>
        <script>
			const cpn={
				template:"#cpn",
				props:{
					number1:Number,
					number2:Number
				},
				data(){
					return {  //不能对porps里面的数据直接操作
						dnum1:this.number1,
						dnum2:this.number2,
					}
				},
				methods:{
					num1input(event){
						this.dnum1=event.target.value,
						this.$emit("num1input",this.dnum1)
						
						this.dnum2=this.dnum1*100,
						this.$emit("num2input",this.dnum2)
					},
					num2input(event){
						this.dnum2=event.target.value,
						this.$emit("num2input",this.dnum2)
						
						this.dnum1=this.dnum2/100,
						this.$emit("num1input",this.dnum1)
					},
				}
			};
            const app=new Vue({
                el:"#root",
                data:{
					num1:1,
					num2:2
                },
				components:{
					cpn
				},
                methods:{
                   num1input(value){
						this.num1=parseInt(value)  //转换成整数，因为传过来的是字符串
					},
					num2input(value1){
						this.num2=parseInt(value1)
					},
                },
				computed:{	
					
				},
				filters:{   //过滤器
					
				}
            })
        </script>
    </body>
</html>

 

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 子组件和父组件传值的示例
10-14
本篇文章将深入探讨Vue子组件与父组件之间的数据传递，帮助开发者更好地理解和运用这一核心特性。 ### 一、子组件向父组件传值 #### 1. 子组件中 在子组件中，我们通常使用`$emit`事件触发器来向父组件发送事件，...
vue 父组件调用子组件方法及事件
08-27
Vue 父组件调用子组件方法及事件 在 Vue 中，父组件调用子组件方法及事件是非常常见的需求，特别是在复杂的组件树中。今天，我们将详细介绍如何实现父组件调用子组件方法及事件。 父组件调用子组件方法 在上面的...
Vue 父子组件间通信
wushen的博客
09-19 2887
Vue 父子组件间通信 : props 父组件向子组件传递数据 $emit 自定义事件 slot 插槽分发内容
vue 自定义组件实现双向绑定
有问题 ! 请留言 !
11-20 4656
vue 自定义组件，触发v-model指令，实现双向绑定 因为开发一个图片上传组件，想到实现双向绑定更为方便，所以就研究了一下，下面是具体实现 vue中对于v-model的解释： v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vu...
vue自定义组件实现v-model双向绑定
热门推荐
寻梦无痕
10-25 5万+
vue中父子组件通信，都是单项的，直接在子组件中修改prop传的值vue也会给出一个警告，接下来就用一个小列子一步一步实现了vue自定义的组件实现v-model双向绑定，父组件值变了子组件也会跟着变，子组件中传过来的值变了，父组件值也会跟着变化。如有错误的地方欢迎评论指出 父级组件 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;p&amp;amp;g
【Vue】四种父组件与子组件双向数据绑定的方法
汪小穆的博客
07-17 1万+
前言：见多了父组件向子组件传递数据，子组件向父组件传递数据，现在来玩玩父组件与子组件之间双向数据绑定，还有通过.sync修饰符，来优化这种写法。 方法一：对象的引用关系 &lt;body&gt; &lt;script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"&gt;&lt;/script&gt; &lt;div id="box"&g...
Vue开发与原生交互input的双向绑定问题
qq_41773964的博客
09-26 1240
Vue开发与原生交互input的双向绑定问题 在Vue的开发过程中，一些特定的需求会需要和原生的js进行交互，在原生操作dom中给input赋值，Vue的双向绑定就失效，此时我们需要使用 dispatchEvent 来触发一下。 ele.dispatchEvent(new Event(‘input’)) ...
vue自定义组件实现v-model双向绑定数据
weixin_55774201的博客
03-08 843
vue自定义组件实现v-model双向绑定数据
Vue2.x两种方式书写v-model组件来进行组件双向绑定
一个前端小菜菜的博客，四五年的经验，熟悉vue，react，nuxt，微信小程序，Uniapp。
02-10 958
最后添加model属性来允许自定义组件使用v-model，虽然平时我们用到的时候可能不知道，也就不知道会调用到它，那是因为它被设置了默认值。而有的时候，我们则需要主动去调用它来自定义model的prop和event。来达到自定义v-model的目的。当然如果不想用input方法也可以用watch来监听inpu框的值来达到这个目的，这样就释放掉原本的input方法了。当然这个props属性你随便自定义，我这里就用value了。下文是官方的对于此api的描述。首先添加props属性，下面是此方式的完整代码。
vue中实现四种双向邦定的方式
qq_45390904的博客
07-17 1054
vue实现双向邦定的四种方式 v-model 指令 .sync 修饰符 model 属性 (JSX/渲染函数中) vue-better-sync 插件 v-model v-model实际上是vue提供的一种语法糖，这种数据双向绑定的方式只能对输入框控件进行数据绑定绑定其value值 <input v-model="text" />//vue简化后的写法 v-model的语法糖展开后就是这个了 <input :value="text" @input="e => text =
vue 子组件向父组件传值方法
08-27
总结，Vue.js中子组件向父组件传递数据主要依赖于自定义事件和`$emit`机制，它使得组件之间的通信变得简单而清晰。在实际开发中，根据具体需求灵活运用这些方法，可以构建出高效且易于维护的组件结构。同时，确保...
vue里面父组件修改子组件样式的方法
08-28
Vue 中父组件修改子组件样式的方法 在 Vue 开发中，经常会遇到父组件修改子组件样式的问题。由于 scoped 属性的存在，父组件的样式无法渗透到子组件中。那么，如何让父组件修改子组件的样式呢？下面将分享三种方法...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 ...在 Vue 中，父组件向子组件通信的方法还有其他方式，例如使用 $emit 和 $on 事件、使用 Vuex 等状态管理库。但是，使用 props 和 v-bind 指令是最常见和最简单的方法。
樱花特效
lbs311709000127的博客
12-02 3295
下面是代码，如果感觉有帮助的话留个赞吧。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花雨</title> <script > /*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Found...
vue（访问子组件的方法或属性，$children,$refs）
lbs311709000127的博客
12-03 3247
$children:访问子组件。访问子组件的方法：this.$children[0].ontap()； 访问子组件的属性：this.$children[0].name $refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>， 使用this.$refs.aaa.name 运...
vue（修饰符once，prevent，stop，监听键盘按键（keyup，keydown））
lbs311709000127的博客
11-23 2716
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </hea...
vue（高级函数：filter，map，reduce）
lbs311709000127的博客
11-25 2558
filter filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter() 不会对空数组进行检测。 注意：filter() 不会改变原始数组。 语法 array.filter(function(currentValue,index,arr), thisValue) 详细网址：https://www.runoob.com/j...
vue（v-if，lable）
lbs311709000127的博客
11-23 1887
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 这个保证点击“切换类型”之后输...
vue子组件和父组件双向绑定
最新发布
09-02
在Vue中，子组件和父组件之间的双向绑定可以通过使用`v-model`指令实现。下面是一个示例： 在父组件中，你需要在子组件上使用`v-model`指令并将一个父组件的属性作为`v-model`的值。这将确保子组件和父组件之间进行双向绑定。 ```vue <template> <div> <ChildComponent v-model="message" /> <p>Parent Component: {{ message }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: '' }; } }; </script> ``` 在子组件中，你需要使用`props`接收父组件的属性，并且在需要更新该属性时，使用`$emit`方法触发一个自定义事件来更新父组件的属性。 ```vue <template> <div> <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> <p>Child Component: {{ value }}</p> </div> </template> <script> export default { props: ['value'] }; </script> ``` 在这个示例中，父组件和子组件通过`message`属性进行双向绑定。当子组件中的输入框发生变化时，会通过`$emit('input', $event.target.value)`触发一个名为`input`的自定义事件，并将输入框的值作为参数传递给父组件。父组件接收到这个事件后，会更新`message`属性的值，并且在父组件和子组件中都会显示最新的值。 这样，子组件和父组件之间的双向绑定就实现了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值