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防抖与节流
Nov 24 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
js module大战
2019/04/19 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
python批量修改图片大小的方法
2018/07/24 Python
python xpath获取页面注释的方法
2019/01/14 Python
python+logging+yaml实现日志分割
2019/07/22 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
党员四风自我剖析材料
2014/10/07 职场文书
刑事和解协议书范本
2014/11/19 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server