组件通过props接收的值来更新data的值

最新推荐文章于 2024-07-10 10:07:13 发布
最新推荐文章于 2024-07-10 10:07:13 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： vue 文章标签： vue将props获得的值绑定到data中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43506222/article/details/103008509
版权

如果一个组件通过props获得值，怎么将值赋给data呢？

	props: {
	  info: {
		type: Array,
		default: function(e) {
			return {}
				},

		},

此时获得了info数组的内容，想要为data动态绑值，需要用到watch：

	watch: {
			info: function(newVal) {
				this.name = newVal[0].name;
				this.sex = newVal[0].name == 1 ? '先生' : '女士';
				this.time = newVal[0].create_t ;
			}
		},

此时data中的值就变成了从info中取得的值：

	data() {
			return {
				name: '',
				sex: '',
				time:''
			}
		},
HeroineYx
关注
专栏目录
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
Vue之props赋值给data 数据变化
Jocelyn_书
05-14 4654
问题：当组件props里的某个值（a）（a值要是对象引用类型的数据）赋给了data对象里的某个值 (b); 当a值发生了变化，b值还是最开始的a值,但实际应该是b值是最新的a值 例如： <template> </template> <script> export default { name:'child ' props:{ a:{ type:Object } }, ..
【随手小记】子组件更新props精简版
qq_35227244的博客
05-15 264
常规用法中，props的属性值value 在子组件中是只读的，要修改value的值只能在父组件中修改，首先在子组件中emit(事件名event，value值) 发送给父组件，然后在父组件监听到event，更新value或者其他逻辑处理，这里不做过多描述。导读：有时候我们只想要简单更新某个props属性值，也许是显示标志的布尔值，也许是标题title，这类只是单纯更新值的处理，写一遍传值-监听-更新就显得很冗长，这里记录一种精简版的更新props属性值的方法。这样父组件就不用再加监听函数了！
vue中父子组件通过props和update:实现双向绑定（el-upload）
最新发布
weixin_43993121的博客
07-10 309
并watch showFileList值的变化， emit(‘update:(属性名)’, (传递数据))在子组件里，将fileList赋值给showFileList。这里的prop是fileList。
vue如何把prop中定义的属性的值赋予给data里的属性
weixin_42608299的博客
01-07 2328
在 Vue 中，可以使用 props 定义组件的输入属性，使用 data 定义组件内部的状态。如果你想把 props 中定义的属性的值赋予给 data 里的属性，可以在组件的 created 生命周期钩子函数中进行赋值。 例如，你可以这样做： export default { name: 'my-component', props: { name: { type: St...
vue中data的props配置项
m0_63767163的博客
11-18 2559
props配置项可以让组件的使用更加灵活多变,适用于更多场景,其功能是接收外部传到组件的数据, 让开发人员在使用别人的组件时可以传入自己要使用的数据.
props 条件验证
日暮斜阳
09-17 508
在Vue中父组件向子组件中传送数据是通过props实现的，一个简单的使用props的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <b...
vue父组件向子组件传参，子组件通过props接收传递过来的参数
qq_39695210的博客
01-29 504
vue父组件向子组件传参，父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。
vue中子组件的methods中获取到props中的值方法
10-18
在Vue.js中，父子组件之间的通信是通过props进行的，其中父组件传递数据给子组件，子组件通过props接收。当我们在子组件的`methods`中需要访问这些props的值时，通常可以直接通过`this.propName`来获取。在描述的...
浅谈vue的props，data，computed变化对组件更新的影响
11-29
当父组件的`parentToChildren1Props`或`parentToChildren2Props`发生变化时，相应的子组件也会接收到新的值并更新视图。Vue会确保这些props的变化能正确地传播到子组件，但子组件不能直接修改props，否则会产生...
【vue】props里的值赋值给data
weixin_45545764的博客
12-03 3210
props赋值data
Vue中的props配置
m0_49767338的博客
11-09 424
PS：props是只读的，Vue底层会检测到对props的修改，如果进行了修改，就会发生警告。若业务需求是需要修改，那么就复制props的内容到data中一份，然后去修改data中的数据。功能：让组件接收外部传过来的数据。
Vue子组件中 data 从props中动态更新数据
weixin_30552811的博客
09-25 2546
考虑这样一种情况，Vue 的父组件根据接口 api 获取到数据后，动态更新到子组件的 props 上，这本身也是一个较为简单的操作, // 父组件 <template> <div class="hello"> <chart :info='info'/> </div> </template> 在子...
vue2在子组件的data中获取不到props中的值，或者一直是默认值(父组件的值来自异步)
浪头的博客
04-27 6956
文章结构复现问题分析原因解决方案使用watch使用v-if 复现问题 为了方便我直接在main.js中使用mockjs模拟一个接口请求并为其设置了2秒的响应时间 mian.js import Vue from "vue"; import App from "./App.vue"; const Mock = require("mockjs"); // 请求的响应时间2秒 Mock.setup({ timeout: "2000", }); // 请求方式要使用小写 Mock.mock("/test
父子组件分页的的props传递，如何把props中的值保存到data中
weixin_46463984的博客
09-13 2209
父子组件分页的的props传递 在封装一些组件的同时可能会夹杂着分页组件一起封装，这就面临一个问题，关于每次分页的当期页面的最新值，如何在父子组件中传递的问题。我也是最近开发遇到的困难，由于对vue的熟悉程度不够，网上的答案有时并不能解决值传递的问题。再次做一个关于父子组件分页的的props传递记录。以便帮助更多新学习vue的小伙伴参考。 基本的父子组件通信，父传子 父组件定义一组数据或单个数据，在引用子组建的时候传递值 使用 v-bind: 动态绑定 子组件使用props接收。 基本的父子组件通信，
vue中把props中的值赋值给data
银滴子的博客
01-22 5506
父组件 <messageForm @createMsgCallback="addCreateMsg" :name="sendForm.name"></messageForm> 子组件 props:{ name:{ type:String } }, computed: { computedName(){ return this.name } }, watch:{ .
vue - data 接收 props 的值
Kimser
09-04 2496
<template> <div> <div v-for="todo in a" :key="todo.id"> {{todo}} </div> </div> </template> <script> export default { name:'todos', data(){ return{ a:this.todos } .
如何动态接收props传过来的值
wxz340825的博客
04-02 3014
1、如果是是要渲染在子组件的teamplate里面，用computed监听一下就可以 2、如果是要用在methods的方法里面，需要用watch监听，然后在watch里调用这个函数即可，不用再在mounted调用 watch: { crEventScene: { handler(newValue, oldValue) { if (newValue.length ...
vue子组件修改props的值
07-27
在Vue中，子组件是不能直接修改传递给它的props值的。Props被认为是父组件的数据，在子组件中应该是只读的。 如果你想在子组件中修改父组件的数据，你可以通过触发一个事件来告诉父组件要修改props的值，并且父组件可以在接收到事件后更新props的值。 以下是一个示例： // 父组件 <template> <div> <child-component :propValue="propValue" @update-prop="updatePropValue"></child-component> </div> </template> <script> import ChildComponent from 'ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { propValue: '初始值' }; }, methods: { updatePropValue(newValue) { this.propValue = newValue; } } }; </script> // 子组件 <template> <div> <button @click="updatePropValue">修改父组件的值</button> </div> </template> <script> export default { props: { propValue: String }, methods: { updatePropValue() { // 触发事件，将新的值传递给父组件 this.$emit('update-prop', '新的值'); } } }; </script> 在这个示例中，子组件通过点击按钮来触发updatePropValue方法，然后使用$emit方法触发了一个名为'update-prop'的事件，并且将新的值作为参数传递给父组件。父组件中的updatePropValue方法接收到了子组件传递的新值，并且更新了propValue的值。这样就实现了子组件修改props的值，并且将修改后的值传递给父组件的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值