vueref如何获取子组件属性值

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程宝库。

 使用refs获取嵌套组件的值功能简介：1、父组件包含zujian1，而zujian1又包含zujian22、zujian2绑定一个输入参数<input ref="query" v ...