vue中父组件如何动态修改子组件的值?
1.使用ref修改
$refs:
在Vue中,父组件可以通过 $refs来管理通过ref注册过的所有子组件,即 $refs对象下可以包含很多 $ref对象.
创建两个组件分别是父组件:aaa.vue 子组件:bbb.vue
父组件操作(aaa.vue)
在子组件上添加ref=“child”命名。
给按钮添加一个方法,
方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的dlshow内容。
方法内使用this.$refs.child.dlff(1)给子组件的dlff方法传递参数1
/*父组件*/ <template> <div id="da"> <button class="zhu_dl" @click="parentButtonClick" ref="btn">登录一下吧</button> <denglu ref="child" > </denglu> </div> </template> <script> // JS代码 import denglu from '../temo/denglu'; export default { components: { denglu }, data(){ return{ } }, methods:{ parentButtonClick(){ this.$refs.child.dlshow=true //修改子组件data this.$refs.child.dlff('正确传送') //修改传递子组件函数dlff()参数 }, } } </script>
子组件操作(bbb.vue)
<template> <div> <div id="dl_ye" v-show="dlshow"></div> <p v-mode="sum"></p> <p class="text3" @click="panent()" >返回</p> </div> </template> <script> import axios from "axios"; export default { data(){ return{ dlshow:"", sum:" }, methods:{ panent(){ this.dlshow=false }, //父组件使用了本函数穿过来的参数 deff(a){ this.sum=a } } }, </script>
2.使用props传递父传子
props是通过父组件值扔给给子组件,子组件使用props来接住值!
父组件操作(aaa.vue)
- 给子组件使用v-bind传过来的键名和它的值:shuju=“dlshow”
- 在data中定义对应的dlshow
/*父组件*/ <template> <div id="da"> <button class="zhu_dl" @click="parentButtonClick" ref="btn">登录一下吧</button> <denglu :nr="dlshow"></denglu> </div> </template> <script> // JS代码 import denglu from '../temo/denglu'; export default { components: { denglu }, data(){ return{ dlshow:fales } }, methods:{ parentButtonClick(){ this.dlshow=true }, } } </script>
子组件操作(bbb.vue)
使用props接收父组件扔过来的key键和参数类型。
<template> <div> <div id="dl_ye" v-show="nr"></div> <p v-mode="sum"></p> <p class="text3" @click="panent()" >返回</p> </div> </template> <script> import axios from "axios"; export default { props: { //接收父组件传来的值 nr: String //左边是接收的键名,右边的是接受的数据类型 }, methods:{ panent(){ this.nr=false }, } }, </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战