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

更新时间：2022年03月31日 15:59:46 作者：魔力化

这篇文章主要介绍了vue ref如何获取子组件属性值。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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-Router路由守卫详的细用法教程
在Vue.js应用中,Vue-Router是一个非常重要的插件,它允许我们实现页面间的导航,然而,仅仅实现导航是不够的,我们还需要在导航的不同阶段进行各种操作,本文将结合实际案例,详细介绍Vue-Router路由守卫的用法,需要的朋友可以参考下
2024-12-12
在Vue中使用Echarts+封装
这篇文章主要介绍了在Vue中使用Echarts++封装,需要的朋友可以参考下
2023-11-11
如何在Vue 3中扩展Vue Router链接详解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下
2021-06-06
vue项目拍照或上传图片并实现转化为base64格式
这篇文章主要介绍了vue项目拍照或上传图片并实现转化为base64格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
分享vue.js devtools遇到一系列问题
这篇文章主要为大家详细介绍了vue.js devtools遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue.js实现h5机器人聊天（测试版）
这篇文章主要为大家详细介绍了vue.js实现h5机器人聊天测试版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
在Vue3中使用CodeMirror插件的方法详解
CodeMirror是一个功能强大的Web代码编辑器,广泛应用于各种Web应用中,在Vue3项目中集成CodeMirror,可以显著提升代码编辑和展示的用户体验,本文将结合实际案例,详细介绍在Vue3中使用CodeMirror插件的方法,需要的朋友可以参考下
2024-12-12
vue3实战-子组件之间相互传值问题
这篇文章主要介绍了vue3实战-子组件之间相互传值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue中组件的传值方式详解
这篇文章主要介绍了Vue中组件的传值方式详解,Vue中最常见的组件之间的通信方式有12种，今天我们会详细讲解父传子props方式和子传父emit以及非父子组件传值,需要的朋友可以参考下
2023-08-08
Vue中对象数组改变其对象内容值数组没变化的原因与解决方案
最近开发遇到一个问题,修改对象某一个索引对象时,直接将对象赋值给数组的某一索引对象,该数组没变化,在 Vue 中,直接修改对象数组中某个对象的属性值时,数组的引用本身未改变,本文介绍了详细的原理分析和解决方案,需要的朋友可以参考下
2025-03-03