vue父子组件通讯--在组件内使用v-for

最新推荐文章于 2023-10-20 15:31:05 发布
原创 最新推荐文章于 2023-10-20 15:31:05 发布 · 3.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #前端

本文介绍在Vue组件化开发中如何通过父子组件通讯传递数据，并使用v-for渲染动态表格。首先获取后台数据，将其赋值给数组，接着创建子组件并定义props属性接收父组件传递的数据。在父组件中使用v-bind绑定数据，子组件通过props接收到数据后，利用v-for循环展示表格内容。注意，Vue中父子组件通信是单向的，直接修改外部数据会被警告。

Vue组件化开发

通过一个表格渲染的例子来讲
首先最终的效果是这样的，通过http通讯拿到后台数据然后通过vue父子组件通讯将数据传到子组件，最后通过v-for结合表格将数据加载出来

这里写图片描述

首先拿到后台数据
然后将response复制给数组
这里写图片描述

 //vue生命周期钩子 :组件实例创建完成dom未生成
                created () {
             this.$http.post(
                        "/authority/manage",
                        {

                        },
                        {headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }}
                    ).then(function(response){
   
   
                    this.authorityManages=response.data
                        })
                  },
                  data: function () {
   
   
                        return data
                      }

然后创建子组件

Vue.component('AmContentBody',{
    props: ['items'],   
    template:'<div id
最低0.47元/天 解锁文章
vue v-model在父子组件之间的运用
qiulei_21的专栏
06-14 844
通过v-model达到父子组件的双向绑定
vue 父组件通过v-model接收子组件的值的代码
10-16
通过上述示例和知识点的解读，我们可以看到Vue父子组件通过`v-model`进行数据双向绑定的具体实现方式。这种技术方法是Vue组件开发中的一个核心知识点，是组件化开发实践中的必备技能。掌握此技术点，能够帮助开发者...
vue的v-for中循环修改变量（this.xxx）的给子组件传值覆盖重复的问题
HD243608836的博客
10-20 1209
vue的v-for是最后统一调用给子组件传值，而不是每次执行就调用传值一次！所以变量会在被传值到子组件之前，会被一直修改 list.length 次。而底层逻辑应该是就是“浅拷贝”变量，即引用地址都是指向那同一个地址。使用v-for，其中需要根据不同的item修改某个变量(this.xxx)，然后向子组件中传值，但是发现传到子组件中的。我们循环qsList，其中是我自定义的一个组件，想向该子组件中传值。每次都是新的局部变量。
vue,使用v-for循环加载子组件
NI_computer的博客
10-24 1万+
在项目开发中，通常我们需要在一个父页面中载入非常多的子页面，如果每个子页面都一一定义的话，会显得代码非常的冗余。这里我们可以通过v-for循环来实现一个加载子组件的方法。 1.在父组件中引入所有的子组件，并注册 2.在data中将子页面封装成一个数组 pages: [ { name: "allOrder", label: "所有订单", }, { name: "unpaid",
vue父组件如何将v-for遍历的取值传到子组件
chunge_chuntian的博客
09-11 8587
vue的组件开发思想可以起到高内聚低耦合的效果，但vue组件使用过程中存在很多的坑，今天做项目时就遇到需要将父组件通过v-for在数据中遍历取到的值传递到子组件，查了很多网上的博客，终于实现了父子组件的值传递过程，具体实现如下： father.vue中引入的子组件标签 <son></son> <div v-for="(com, index) of comList...
Vue 组件引入子组件v-for
weixin_30266885的博客
09-23 1377
　　当父组件引入子组件时，v-for 遍历对象，会显示对象有多少个属性和方法，为遍历出显示次数。 　　　　　　而v-for 遍历数组，则遍历显示一次。 父组件 <!--引入子组件 子组件，在子组件 v-for 指令遍历对象，会循环显示次数为对象有多少属性和方法--> <compontentA v-for="(value, key) in Ob...
vue中父组件传递数据及方法给子组件
WY001的博客
09-07 454
父组件 <template> <div> <!--<HelloWorld/>--> <!--<Menu :menus="menus" :webSite="webSite" ></Menu> <Menu :menus="menus" :webSite="webSite" @addMenu="addMenu"></Menu>--> <Menu :menus="
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
08-28
Vue 自定义组件 v-model 双向绑定、父子组件同步通信的多种写法 在 Vue 中，父子组件通信通常是单项的，但是在实际开发中，我们经常需要双向通信。因此，本文将介绍 Vue 自定义组件 v-model 双向绑定、父子组件同步...
vue.js使用v-model实现父子组件间的双向通信示例
10-15
总的来说，这个示例展示了如何使用`v-model`在Vue.js中实现父子组件间的双向通信。子组件通过`props`接收父组件的数据，并通过`$emit`和`watch`来响应并更新这些数据，进而通知父组件。这种方式使得组件间的通信变得...
vue父子组件-子组件使用父组件的数据
linxidshuwu的博客
01-04 482
子组件通过props访问父组件的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件通信练习</title> </head> <body> <div id="app"> {{message}} <cpn :books="books"></cpn> </d
vue组件通信_父向子-配合循环 v-for
Henry_ID的博客
07-14 410
vue组件通信_父向子-配合循环 目的: 把数据循环分别传入给组件内显示 数据 list: [ { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' }, { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' }, { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏
Vue 子组件与父组件通信，v-for生成的子组件通信，v-on/@事件参数问题
weixin_43818307的博客
11-11 1414
Vue 子组件与父组件的数据通信，v-for生成的子组件与父组件的数据通信，v-on/@事件参数问题
1-5、组件父传子，渲染数据
David2121的博客
03-23 221
Good: <div class="custom-control custom-checkbox"> <!-- 复选框 --> <!-- 用:checked="state" 而不用 v-model:"变量"--> <input type="checkbox" class="custom-control-input" :id="'cb' + id" :checked="state" ...
vue父组件给v-for循环的子组件传值
chengjiayijiu的博客
05-15 2059
当子组件是通过v-for循环出来的，并且只给特定的某个组件传值时通过this.$refs调用子组件的方法传递数据。一般传值this.$res[xxx]都不用带下标，但是如果是for循环出来的一定要指定下标this.$refs[xxx][0]。因为我这里是ref唯一的所以每个传值的下标都是0，如果定义的子组件ref不唯一都是类似ref="ABC"这种，给指定的子组件传数据就要通过他们的索引值传值this.$refs[xxx][0]、this.$refs[xxx][1]、this.$refs[xxx][2]
Vue番外之父子组件传值
二木成林
11-14 408
通过props通信（父传子） 基本准备 使用vue脚手架创建个vue项目，然后整理目录结构如下： 其中各个文件内容如下： 父组件Father.vue <template> <div> <h2>我是父组件</h2> </div> </template> <script> </script> <style> </style> 子组件Child.vue
v-for循环数组，将id传到子组件中
qq_44206870的博客
10-07 407
v-for循环数组，将id传到子组件中
vue父子组件传值
热门推荐
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
Vue 学习笔记：v-for 循环引用组件
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
02-07 7629
前端开发过程中，需要动态添加操作面板，将操作面板封装成组件后，使用 v-for 引用多个操作面板。这里有两个知识点，子组件引用时怎么动态设置 ref 属性？ <el-button :key="index" :ref="`btn${index}`" v-for="(btn,index) in btns"> ...
vue父组件向子组件传值
weixin_44474200的博客
05-19 253
先上代码 <div id="app"> <cpn1 :one = "hobbies"></cpn1> </div> <template id="cpn1"> <!--<h1 >{{one}}</h1>--> <ul> <li v-for="item in one">{{item}}</li> </ul> <
vue父子组件v-model数据绑定
最新发布
12-27
### Vue 中父子组件 `v-model` 数据绑定 在 Vue.js 中，通过 `v-model` 可以简化父组件与子组件之间的数据传递和更新过程。具体来说： #### 使用 `v-model` 绑定单向数据流 当父组件使用 `<Child v-model="countModel" />` 时，实际上是在做两件事[^1]： - 将 `countModel` 的值作为 prop 传递给子组件 - 监听来自子组件的一个自定义事件（默认为 `input`），并将其返回的值赋给 `countModel` 这相当于下面这段代码： ```html <Child :value="countModel" @input="newValue => countModel = newValue"></Child> ``` #### 完整示例展示双向绑定机制 为了更清晰地理解这一过程，这里给出一个完整的例子来说明如何利用 `v-model` 实现父子组件间的双向绑定[^2]: **Parent.vue** ```vue <template> <div> <!-- 子组件 --> <Son v-model="formData.value"></Son> <!-- 修改按钮 --> <button @click="changeVal">点击变化 value</button> <!-- 显示当前值 --> {{ formData }} </div> </template> <script> import Son from './Son.vue' export default { components: { Son }, name: 'Father', data() { return { formData: {} // 初始化表单对象 } }, watch: { 'formData.value'(val) { console.log('父组件看到的新值:', val); } }, methods: { changeVal() { this.formData.value = '父组件修改后的值'; } } } </script> ``` **Son.vue** ```vue <template> <input type="text" :value="value" @input="$emit('input', $event.target.value)"> </template> <script> export default { props: ['value'] }; </script> ``` 在这个例子中，每当用户输入新的文本时，子组件会触发 `input` 事件并将新值发送回父组件；而父组件则负责接收这个新值并更新自身的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值