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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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中对数据库操作的封装
2006/10/09 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
php常用的工具开发整理
2019/09/26 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python登录注册验证功能实现
2018/06/18 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python能否java成为主流语言吗
2020/06/22 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python 如何引入协程和原理分析
2020/11/30 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
博士毕业生自我鉴定范文
2014/04/13 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
八年级历史教学反思
2016/02/19 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python