vue遇到过的坑（父组件向输入框组件传值进去，然后子组件利用传进来的数据进行数据绑定的问题与解决方法）

最新推荐文章于 2024-07-07 17:05:44 发布
最新推荐文章于 2024-07-07 17:05:44 发布
阅读量1.3w 收藏 4
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limy_cxm/article/details/73500589
版权

vue.js一大特性是可以实现很多可复用的组件。
我做项目的时候，封装了一个输入框组件，然后页面上所有相同样式的地方都用这个组件来进行调用，刚开始以为实现起来很简单，作为一个vue刚刚学习的人来说，不就是写一个单组件，然后各个页面input的问题吗，可是实际当我在进行传值的时候遇到了问题，因为我们传值过程中，vue一向遵循的是数据耦合，不会去更改两者之间的数据，vue也提供了报错，但是在进行父组件传值到子组件，而且子组件的这个属性v-model绑定了，当我们在输入框上改变的值会去更改父组件的值。解决办法如下
父组件
父组件
子组件

子组件
重点内容
input组件内部维护私有数据，通过computed赋值，watch变化通过$emit通知父组件

limy_cxm
关注
专栏目录
Vue可编辑表格的实现——单元格编辑表格
qq_40547061的博客
05-22 1万+
一.准备阶段 1.在views中创建table实例页并配置路由 <template> <div> </div> </template> <script> import { getTableData } from '@/api/data' export default { data () { return { tableData: [], columns: [ { key: 'name',
Vue3子组件向父组件传值
geejkse_seff的博客
03-06 6666
子组件向父组件传值核心的部分是emit事件，子组件绑定一个emit触发事件，父组件监听事件就可以达到子组件向父组件传值的目的。 这里我们编写一个计数器的案例。 首先我们先展示子组件和父组件的代码： <template> <div> <button @click="increment">+1</button> <button @click="decrement">-1</button>
Vue 父子组件传值异步获取
我的博客
05-02 1639
这个问题首先是在子组件渲染完成时传过来的错信息发现的，Error in mounted hook: "TypeError: Cannot read property '0' of undefined"，我想要通过父子组件异步传数组，但数组最先是空值，所以我们就需要在子组件中使用 watch 来解决这个问题 watch: { tagValue: { handler(newValue) { ...
vue传值处理：vue中父组件通过props传值给子组件，子组件表单控件使用值，子组件改变该值时如何避免报错
qq_42961150的博客
10-12 1036
话不多说，直接上代码~ 父组件father.vue： <template> <div class="father"> <child :txt="txt" /> </div> </template> <script> import child from './components/child.vue' export default { name:'father', components:{ child },
开发应该理清的vue2的生命周期（一）——watch在生命周期的触发时机1
最新发布
weixin_65908792的博客
07-07 748
本文章，将通过vue2父组件和子组件的“created”和“mounted”生命周期。父子组件通过props传值，父组件在“created”和“mounted”生命周期改变了传给子组件的props值。子组件监听该props值，同时设置immediate为true。然后，看看watch在生命周期的触发时机。
VUE 子组件内输入框，父组件获取输入框的值
weixin_45432736的博客
09-15 2434
父组件 <template> <div> <!-- 子组件 --> <Slot_input v-model="str"></Slot_input> <!--显示子组件输入框的值 --> <div>now str is:{{str}}</div> </div> </template> <script> /* 引入子组件 */ impor
vue项目：父组件向子组件传值，子组件需要对传过来的数据进行修改问题
BoZai_ya的博客
06-15 3230
在写vue+ant项目时，子组件对父组件传递过来的数据进行修改报错问题！
Vue父子组件双向绑定传值的实现方法
01-19
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的 v-model 了，例如 <input type=text /> 它会响应表单元素的...
Vue表单类的父子组件数据传递示例
08-27
在父组件中使用 v-model 指令绑定一个值，来接收子组件传递过来的数据。 示例代码： <!-- 父组件 parent.vue --> 问卷调查 <child v-model="form.name"></child> 姓名：{{form.name}} import ...
基于Vue开发数字输入框组件
08-28
基于Vue的数字输入框组件开发涉及到了Vue组件的构建过程、数据绑定、事件处理和组件通信等多个知识点。下面将详细介绍这些知识点。 ### Vue组件构建 在Vue中，组件是可复用的Vue实例，可以拥有自己的模板、数据和...
父组件传值给子组件&&子组件向父组件传值的方法
mengmeng1_的博客
02-02 555
父组件传值给子组件： 1.创建子组件，在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props，然后创建一个名为message的属性 3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值 4.保存修改的文件，查看浏览器 5.我们依然可以对message的值进行v-bind动态...
vue中input输入框触发功能父子组件传值
freewlt
06-15 2482
子组件： <template> <div class="inputTip"> <el-input v-model="currentValue" @input="childClick"></el-input> <el-tooltip class="item" effect="dark" :content="msg" placement="top"> <i class="el-icon-warning-outl
ElementUI form表单在dialog中，先点了编辑后添加，重置表单无效
ksyjy的博客
07-11 4486
在用ElementUI做动态表单时，数据的修改都是打开dialog（子组件）中进行操作的，但是在修改数据时，正常来说可以直接调用 this.$refs[str].resetFields() 直接清空，但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准; Dialog 中的内容是懒加载的，目前 edit (更新...
vue父子组件传值，子组件改变值后父组件的值也变了
fk129
11-28 618
问题复述 父组件给子组件传值，子组件改变值，父组件的值也相应的跟着变化，但有时并不想父组件的值改变 问题原因 双向绑定 解决办法 最简单有效的方法是JSON.parse(JSON.stringify(data )) 参考 https://blog.csdn.net/weixin_43254676/article/details/91361532 深入理解 javascript的浅拷贝和深拷贝 ht...
[实力入坑]VUE-父组件向子组件传值
张泽的博客
06-02 248
这里写一种简单、实用vue父组件向子组件传值的方式。（感觉vue文档有很多地方没写清楚） 比如：routlink.vue是我要展示的页面，tables.vue是需要调用的组件（另外一个页面）。 本人使用的是ElementUI组件，大家直接复制的话可能是跑不起来的，不过这种方式很简单明了。 直接进行局部组件注册，在所需要的文件scrip中导入即可，需要在components中写入就行。 一些相关说明直接在注释里，采用的是props传值方式。 下面是routlink.vue <template >
自定义组件v-model绑定
热门推荐
orq18810575870的博客
08-25 1万+
自定义事件v-model绑定   首先先看看官方文档的写法： 我们知道v-model与v-bind的区别有两点： 1 v-model是双向绑定数据，也就是当父组件的传进去的数据发生改变时，子组件的数据也会发生改变，当子组件发生改变时，父组件也会发生改变   v-bind是单向绑定，当父组件的数据发生改变时，子组件的数据也会改变，但是当子组件发生改变时，父组件的数据不会发生改变 2 ...
【Vue】23.vue项目中子组件接收不到父组件传值的问题
返璞归真
06-14 1万+
项目背景：使用vue-cli3搭建的项目框架 问题描述：父组件里面有一个轮播图，这个轮播图我封装了一下，封装成了一个组件引到了这个页面里面，我们产品的需求是，根据页面获取到的婚姻状态做判断，第二张图片的链接点进去显示不同的文章，意思就是根据婚姻状态给第二张图片赋不同的链接值，所以我需要传给这个轮播图组件一个婚姻状态，这个婚姻状态呢，又是从接口里面动态获取到的，这个轮播图呢，又是在页面加载的时候就...
Vue中利用v-model实现父子组件间的双向通信
weixin_38098192的博客
06-11 4488
https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model 我们常在input上使用双向数据绑定，实现更新view的时候，model的数据也自动被更新了，model更新的时候，view也自动更新。 如果我们在自定义组件中使用v-model，来实现实例和组件间的双向数据绑定。 v-model的绑定原理： v-model的语法糖： ...
js vue3子组件input向父组件传值
05-27
在Vue3中，子组件向父组件传递值需要使用事件（Event）。以下是一个简单的例子： 子组件template代码： ```html export default { data() { return { inputValue: '' } }, methods: { updateValue()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值