乘风原创程序

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

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