在vue中父子组件传值的时候，input的属性渲染到父级的div上问题解决

最新推荐文章于 2023-03-15 10:19:41 发布
最新推荐文章于 2023-03-15 10:19:41 发布
阅读量318 收藏
点赞数
分类专栏： 前端 文章标签： vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ctAnnice/article/details/117255938
版权
在Vue开发中遇到一个罕见问题，输入框的属性意外渲染到了父级div上，导致功能失效。经过仔细检查，发现是props中接收值的变量名拼写错误，从而未正确传递和绑定数据。此经验分享旨在提醒开发者注意此类细节，避免类似错误。
摘要由CSDN通过智能技术生成

在vue中，父子组件传值的时候，input的属性渲染到父级的div上了，从来都没遇到过，这并不符合逻辑，所以找了半天，终于找到错误原因了，在props 中的传值变量名写错了，没接到值，所以input的属性渲染到父级div上了，不生效了，以此记录一下，长长记性........

ctAnnice
关注
专栏目录
【Vue】父子组件传值
qq_43515448的博客
07-14 525
这次不借助webpack实现。 其实都是比较基础的东西，但是也蛮有意思的。 子传父 1. 通过$emit使得父组件可以通过v-on监听子组件中绑定的方法 点击Button后传参 子组件代码： let ChildComponent = { data() { return { childValue: '' } }, methods: { passValueToFather() {
vue组件传值的12种方法
土豆的博客
08-25 1464
props $emit .sync v-model ref $children / $parent $attrs / $listeners provide / inject EventBus Vuex $root slot
vue父组件传值给子组件在element-UI select，input不渲染问题
blank_g的博客
06-29 1739
// 渲染改变值的地方 <el-form-item label="审批结论：" prop="reason"> <el-select v-model="approvalForm.reason" placeholder="请选择" @change="changeReason"> <el-option label="通过" value="0"></el-option> <el-option label="不通过" value="1"&
Vue组件之间的通信含父传子或者是子传父以及input中父子组件的双向绑定
xiangyizhixuexi的博客
06-15 397
父传子： 当父组件的数据需要传给子组件时，则要用到props这个属性，在组件申请中添加这个props，如：
Vue中组件之间相互传值(父组件传给子组件，子组件传给父组件)
ioszhanghui的博客
07-11 1811
在Vue项目中，经常会出现，父组件传值给子组件，同时，有时候也希望子组件的值传递给父组件。 场景：比如，你封装了一个input组件，你需要在父组件引用的时候，设置placeholder，这就需要把它传给子组件，同时，你input组件中输入了什么内容,需要给父组件，并在父组件中做逻辑操作。 父组件传值给子组件，这个在传递的过程中依赖于props属性，把要给子组件传递的参数名，配置在props中。...
组件间传值之@Input
IT飞牛
04-24 521
组件间传值，可以用Input或者路由传值。 例如：由列表页进入详情页 1、如果用路由传值，就只需要在路由中添加id参数。 2、如果用Input传值，那么就需要常见一个detail组件，并定义Input参数，在list中调用detail组件，并传入值。 Input传值代码演示： A是B的父组件，B中有Input参数how,A中调用B组件，并传入[how]参数。 //A页面代码 <table c...
Vue学习笔记 - 页面数据渲染的方式（二）
HVENLY的博客
05-26 1169
该篇文章主要讲了Vue中渲染数据的第6和第7种方式，即v-model和v-for这两种方式。其余5种方式请点击Vue学习笔记 - 页面数据渲染的方式（一）进行查看 目录6.v-model7.v-for 6.v-model 1.定义：唯一的一个可以实现双向数据绑定的指令，单向数据只能：v-m或m-v，而双向绑定v变m就变，m变，v就变 2.作用元素：只有表单类元素能被v-model渲染 3.原理：v-model实际上是一个语法糖，它的本质包含两个操作 1）v-bind：绑定一个value属性，实现m变v变.
Vue 使用Props属性实现父子组件的动态传值详解
10-16
在示例代码中，我们看到`v-bind:my-message`用来绑定父组件的数据`parentMsg`到子组件的`myMessage`属性上。 首先，我们定义了一个名为`child`的子组件，通过`Vue.component`注册。在`props`选项中，我们声明了子...
Vue组件通信——父子组件通信的四种方法
weixin_44001906的博客
07-13 1万+
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致） 之后就可以全局使用组件了 局部引入 在父组件中引入 import ChildrenDemo from '@/views/components/Ch
vue2.x组件间传值及在vue子组件中操作父组件数据时生命周期的问题
JCat的博客
07-26 2164
前言 在做项目中遇见一个bug， vue在子组件内部操作父组件数据时，在生命周期mounted和created中给页面渲染父组件的值页面渲染是正常的，但是控制台会报错找不到值！ 此文记录下vue组件之间如何传值取值，和bug的解决方法。 正文 父组件给子组件传值—props 实现父组件向子组件传值。 父组件内：msg是绑定的自定义属性，类似我们原生html 给标签自定义属性一样 <child...
判断子div存在勾选的input就将父元素的input勾选上；负责格式化父元素的input
weixin_33671935的博客
03-21 216
$(".manage_xin_hou input").click(function() {//给子div的input绑定点击事件 var inputes=$(this).parent().parent().find('input');//父元素下所有的input var k=1; for(var g=0;g<inputes...
vue传参数：子传父 this.$emit('input',val)
string佳佳的博客
12-05 1万+
子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了 如果你不用input，则需要常规的@方法获取值，并用jq代码给kcrid赋值。 ...
vue传参数：子传父 this.$emit(‘input‘,val)
xiaokanfuchen86的博客
09-09 1328
子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了 如果你不用input，则需要常规的@方法获取值，并用jq代码给kcrid赋值。
vue3 父子组件传参详解
最新发布
a2357346100的博客
03-15 1万+
vue3的父子组件传参详解
【vue】---子组件如何渲染到父组件中的?
m0_56349322的博客
03-27 1411
APP 父组件 中 引入 Left 子组件 效果如下 步骤： 001.在父组件中导入子组件 002.注册组件 003.在结构中使用组件 组件的名称就是 命名的 Left.vue 中的 Left
vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染
热门推荐
难瘦不难过的专栏
12-05 1万+
1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 props: {   echartStyle: {     type: Object,     default() {       return {}     }},     titleText: {       type: String,       default: ''     },     tooltipForma...
vue--同步父子组件和异步父子组件的生命周期顺序
xingchen678的博客
04-02 566
关于vue组件的引入方式有两种 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page) ...
js按钮触发网页提醒_网页js自动触发input或者button，复制指定DIV内容的方法
weixin_39946364的博客
12-20 468
今天在帮客户做zblog模板的时候，有一个js自动触发复制div内容的需求，在网上找了很多代码，可以自动触发功能，却无法复制div内容到剪切板。自动触发input或者button的代码如下：//一秒后模拟点击setTimeout(function(){//IEif(document.all){document.getElementById("test").click();}//其它浏览器e...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值