当前位置:首页 > 技术分析 > 正文内容

vue父组件修改子组件的值(通过调用子组件的方法)

ruisui885个月前 (01-13)技术分析36

props只支持第一次加载这个组件的时候获取父组件的值,后续修改父组件的值得时候子组件并不会动态的更改。

然而我们想要通过父组件修改子组件的值要怎么做呢?

可以通过ref的方式调用子组件的方法改变子组件的值。

子组件

<template>

<div>

<span>{{data}}</span>

</div>

</template>

<script>

export default {

data() {

return {

data:'就要被修改啦'

};

},

methods: {

a(val) {

this.data=val;

},

},

};

</script>


父组件

<template>

<div>

<child ref='child'></child>

</div>

</template>

<script>

export default {

mounted(){

setTimeout(()=>{

this.$refs.child.a("把你修改了");

},3000)

}

components:{

child:()=>import("../components/child.vue")

}

};

</script>


好啦问题就解决啦

————————————————

版权声明:本文为CSDN博主「冲啊使劲冲」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_49279305/article/details/120902373

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/250.html

标签: vue 小程序
分享给朋友:

“vue父组件修改子组件的值(通过调用子组件的方法)” 的相关文章

专为系统管理员设计的LINUX发行版SYSLINUXOS

SysLinuxOS 承诺“结束为管理任务寻找正确工具”的局面,提供“非常广泛的软件选择,特别是用于使用互联网”。译自 SysLinuxOS, A Linux Distro for System Administrators,作者 David Cassel。全球各地的系统集成商正在发现 SysLin...

「干货」通俗易懂的Deno 入门教程

作者: semlinker转发链接:https://mp.weixin.qq.com/s/2eqRTsf_z7Bcs6dziXe73Q一、Deno 简介Deno 是一个 JavaScript/TypeScript 的运行时,默认使用安全环境执行代码,有着卓越的开发体验。Deno 含有以下功能亮点:默...

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

有效地简化导航-Part 1:信息架构

「四步走」——理想的导航系统要做一个可用的导航系统,网页设计师必须按顺序回答以下4个问题:1. 如何组织内容?2. 如何解释导航的选项?3. 哪种导航菜单最适合容纳这些选项?4. 如何设计导航菜单?前两个问题关注构建和便签内容,通常称为信息架构。信息架构师通常用网站地图(site map diagr...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...