乘风原创程序

  • vue ref如何获取子组件属性值
  • 2022/3/31 17:20:22

  • 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>

    以上为个人经验，希望能给大家一个参考，也希望大家多多支持本教程网。