vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。
场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。
比如想实现一个switch开关按钮的公用组件:
1.父组件可以向按钮组件传递默认值。
2.子组件的操作可以改变父组件的数据。
3.父组件修改传递给子组件的值,子组件能动态监听到改变。
比如父组件点击重置,开关组件的状态恢复为关闭状态:
方法1:
1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,所以需要在data里重新定义属性名并将props里的数据接收。
2、首先想到的肯定是在computed计算属性里监听数据的变化,那就直接在computed里监听父组件传递过来的props数据的变化,如果有变动就进行操作,如:
export default{
name:'SwitchButton',
props: {
status: {
type: Boolean,default() {return false}
}
},
data () {return{
switchStatusData:this.status //重新定义数据
}
},
computed: {
switchStatus:function() {return this.status //直接监听props里的status状态
}
}
}
}
这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。
方法2:
使用watch和computed组合实现:如
export default{
name:'SwitchButton',
props: {
status: {
type: Boolean,default() {return false}
}
},
data () {return{
switchStatusData:this.status
}
},
computed: {
switchStatus:function() {return this.switchStatusData //监听switchStatusData 的变化
}
},
watch: {
status (newV, oldV) {//watch监听props里status的变化,然后执行操作
console.log(newV, oldV)this.switchStatusData =newV
}
},
methods: {
switchHandleClick () {this.switchStatusData = !this.switchStatusDatathis.$emit('switchHandleClick', this.switchStatusData)
}
}
}
下面是实现该组件的代码:
name:'SwitchButton',
props: {
status: {
type: Boolean,default() {return false}
}
},
computed: {
switchStatus:function() {return this.status
}
},//watch: {
//status (newV, oldV) {
//console.log(newV, oldV)
//this.switchStatusData = newV
//}
//},
methods: {
switchHandleClick () {constswitchStatusData = !this.switchStatusthis.$emit('switchHandleClick', switchStatusData)
}
}
}
line-height: .8rem;
padding:0.4rem;
.switch
float: right;
font-size: 0;
.switch-bar
position: relative;
display: inline-block;
width: .8rem;
height: .4rem;
border-radius: .4rem;
background: #ddd;
border: 2px solid #ddd;
vertical-align: middle;
transition: background .3s, border .3s;&.active
background: $bgColor;
border: 2px solid $bgColor;
.switch-btn
left: .4rem;
background: #fff;
.switch-btn
position: absolute;
left: 0px;
display: inline-block;
width: .4rem;
height: .4rem;
border-radius: .2rem;
background: #fff;
transition: background .3s, left .3s;
vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值相关推荐
- vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录 组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
- vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
- 前三十年看父敬子,后三十年看子敬父
一句老话,老爸从小就告诉我的老话.一直琢磨到现在.我的前三十年,也没剩下多少时间了.我却还没有准备好后三十年. 我没准备好让别人因我而尊敬我的父亲,也没准备好让别人因我而尊敬我的孩子. 家长从自己孩子 ...
- vue3.0 组件使用 引用 传值 父传子 子传父
vue3.0 组件使用 引用 传值 父传子 子传父 组件的创建 组件引入 在html中使用 组件传值 父传子 子接收参数 子传父 父接收参数 组件的创建 1.将所需功能封装在components目录下 ...
- 【Vue】Props传递数据(父传子) 自定义事件(子传父)
文章目录 一.定义一个父组件和一个子组件(子组件嵌套在父组件中) 二.Props传递数据(父传子) 1.使用Props数组方式传值 2.对象方式传值 三.自定义事件(子传父) 一.定义一个父组件和一个 ...
- Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果
文章目录 一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...
- vue父传子通过对象的形式简写
今天刚看到父传子传对象形式的简写方式,给大家分享一下. 话不多说 上代码 <script src="https://unpkg.com/vue@next"></s ...
- vue父传子mounted问题
vue父传子mounted问题 问题描述: 场景是父组件向子组件传递参数,子组件在父组件的dialog里面,子组件是在mounted的时候渲染父组件传递的参数,出现bug,子组件mounted只加载一 ...
- 【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 获取要注入事件的 View 对象 | 通过反射获取 View 组件的事件设置方法 )
文章目录 前言 一.获取要注入事件的 View 对象 二.通过反射获取 View 组件的事件设置方法并执行 前言 Android 依赖注入的核心就是通过反射获取 类 / 方法 / 字段 上的注解 , ...
最新文章
- avcodec_receive_packet 11
- mysql innodb 事务_Mysql InnoDB事务
- c语言静态成员变量重名会怎么样,C++中静态成员函数与静态成员变量(static )...
- 深度行情模块添加【火币交易助手开发日记】
- Websocket实现前后台通信,demo小测试
- python绘制时间轴_MatPlotLib动态时间轴
- js undefined 相等_你知道JS中==和===区别吗?
- 解决json日期格式问题的3种方法
- 【图像增强】基于matlab暗通道图像去雾【含Matlab源码 1226期】
- Linux 上免费的视频转换器FFmpeg
- 基础-07-八大疑问词
- VPS,虚拟主机,云主机,独立服务器区别
- 项目笔记:Arduino读取SD卡
- 添加系统报警短信或邮箱 需要集中配置
- Cygwin 下载安装
- Arduino控制SD卡(一)
- ChatGPT与BimAnt的1小时对话实录【数字孪生】
- Java程序员必会!java语言的编译命令是什么
- #define宏加括号和不加括号的区别
- luoguP2231 [HNOI2002]跳蚤