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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
Vue router配置与使用分析讲解
Dec 24 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开发中常用的字符串操作函数
2011/02/08 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
Js 中debug方式
2010/02/07 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS