vue ref如何获取子组件属性值


Posted in Vue.js onMarch 31, 2022

ref获取子组件属性值

父引入、注册组件并调用组件

引入、注册

<script>
  ....
  import CustomerModal from './modules/CustomerModal'
  export default {
    name: "CustomerList",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      CustomerModal,
      JDictSelectTag
    },
    ...
  }
</script>

调用组件

<customer-modal ref="modalForm" @ok="modalFormOk"></customer-modal>
// ref属性值指定了从$refs中获取组件的名称

调用子组件的函数

this.$refs.modalForm.add();

调用子组件的属性

this.$refs.modalForm.title = "新增";

子组件更改属性

严格来说,Vue子组件不能随便更改父组件传递过来的属性,但是可以这样修改

父组件

<component-a :num.sync="number">这是子组件</component-a>

子组件

<template>
  <div>
    <p @click="change">子属性{{num}}</p>
  </div>
</template>
<script>
    export default {
        name: "ComponentA",
        props: {
          num: Number
        },
        methods: {
          change(){
            this.$emit('update:num', 10)
          }
        }
    }
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
Vue 组件注册全解析
Dec 17 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue如何使用模拟的json数据查看效果
vue+iview实现手机号分段输入框
Mar 25 #Vue.js
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
php生成word并下载代码实例
2019/03/15 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python 调用Java实例详解
2017/06/02 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python装饰器原理与用法深入详解
2019/12/19 Python
python MD5加密的示例
2020/10/19 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
动员大会主持词
2014/03/20 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
优秀教师个人总结
2015/02/11 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
不同意离婚代理词
2015/05/23 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Python初学者必备的文件读写指南
2021/06/23 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js