vue 中的 ref 的用法

1、基础用法：获取页面dom元素

<template>
  <div id="app">
    <div ref="text">div盒子</div>
    <button @click="btn">获取div内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    btn() {
      console.log(this.$refs.text)
    }
  }
}
</script>

ref 除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法

2、获取子页面的 data

子组件

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '子组件内容'
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <TenantSet ref="text" />
    <button @click="getTenantSet">获取子组件中的值</button>
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {}
  },
  methods: {
    getTenantSet() {
      console.log(this.$refs.text.msg)
    }
  }
};
</script>

3、调用子组件方法

子组件

<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log('子组件内的方法')
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <TenantSet ref="ces" />
    <button @click="getTenantSet">调用子组件</button>
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {}
  },
  methods: {
    getTenantSet() {
      this.$refs.ces.open();
    }
  }
};
</script>

4、子组件调用父组件内的方法

子组件

<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log('子组件方法');
      //  调用父组件方法
      this.$emit('refreshData');
    }
  }
}
</script>

 父组件

<template>
  <div id="app">
    <TenantSet ref="ces" @refreshData="getData" />
    <button @click="getTenantSet">调用子组件</button>
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {}
  },
  methods: {
    getTenantSet() {
      this.$refs.ces.open();
    },
    getData() {
      console.log('父组件方法')
    }
  }
};
</script>