vue 父子组件传递数据
2023-09-11 14:22:19 时间
单向数据流:
数据从父级组件传递给子组件,只能单向绑定。
子组件内部不能直接修改从父级传递过来的数据。
解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了
//用data来解决不能修改父组件传递的数据的问题,
// 我们新增一个number保存父组件传递过来的数据,这样就可以修改数据的值了
data:function(){
return {
number: this.count
}
},
数据就可以修改了:
methods:{
handleclick:function() {
this.number=this.number+2;
this.$emit('change',2);//子组件向父组将传递参数,触发change事件
}
}
我们使用$emit触发chang方法,在父组件的模版中监听chang方法,最后在Vue实例中调用
(1)
this.$emit('change',2);//子组件向父组将传递参数,触发change事件
(2)
<counter :count="1" @change="handleIncreae"></counter>
(3)
var vm=new Vue({ el:'#shuju', data:{ total:3 }, components:{ counter:counter }, methods:{ handleIncreae:function(step) { this.total+=step; } } })
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="shuju" > <counter :count="2" @change="handleIncreae"></counter> <counter :count="1" @change="handleIncreae"></counter> <div>{{total}}</div> </div> <script> var counter={ props:['count'], //用data来解决不能修改父组件传递的数据的问题, // 我们新增一个number保存父组件传递过来的数据,这样就可以修改数据的值了 data:function(){ return { number: this.count } }, template:'<div @click="handleclick">{{number}}</div>', methods:{ handleclick:function() { this.number=this.number+2; this.$emit('change',2);//子组件向父组将传递参数,触发change事件 } } }; var vm=new Vue({ el:'#shuju', data:{ total:3 }, components:{ counter:counter }, methods:{ handleIncreae:function(step) { this.total+=step; } } }) </script> </body> </html>
效果:
2018-05-15 21:47:17
相关文章
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- Vue + element-ui 【前端项目一】Vue 组件中引入组件 6
- 【Vue】单文件的组件(.vue)代码实例
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue——详解MVVM模型在vue中的使用
- 【前端】vue组件之间数据传递/父子组件/父传子/子传父/兄弟组件
- Vue.js路由管理器 Vue Router
- vue 组件 子向父亲通信用自定义方法用事件监听
- Vue 国际化之 vue-i18n 的使用
- vue-cli3快速创建项目
- 02-vue基础-Vue常用特性
- Vue知识点总结(1)——v-text、v-html(超级详细)
- Vue知识点总结(14)——其它组件通信方式(provide/inject和$parent/$children)(超级详细)
- vue组件---边界处理情况
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue中$refs、$emit、$on的使用场景
- vue整合adminLTE
- 浅析按需引入自定义组件unplugin-vue-components、按需自动导入api unplugin-auto-import的使用和vite-plugin-style-import使用
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- 深入理解Vue父子组件通讯的属性和事件
- vue 使用动画钩子函数
- vue前台(二)在路由配置项中,配置meta属性来影藏组件
- petite-vue源码剖析-优化手段template详解
- vue给url添加编码
- 2018年最值得关注的30个Vue开源项目
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- vue 回车自动登录