vue ref怎么获取子组件属性值

本篇内容介绍了“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 ref怎么获取子组件属性值”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！