vue中的使用ref是一种常见的手段，用于获取某个元素或者某个子组件。

父组件获取子组件的方法和属性

父组件

<template>
	<i-bind-phone ref="phoneRef" :phone="phone" />
</template>

<script>
import PhonePopup from '@/views/personal-center/system-setting/componets/bind-phone';
export default {
    
    
  components: {
    
    
    'i-bind-phone': PhonePopup,
  },

  data() {
    
    
    return {
    
    
      phone: null,
      },
  },
  methods: {
    
    
    // 点击查看手机绑定
    onClickChangePhone() {
    
    
    // 父组件调用子组件中的showPhone方法
      this.$refs.phoneRef.showPhone();
      console.log(this.$refs.phoneRef.visible)
    },
  },
};
</script>

子组件

<template>
	<div v-if="visible">
		....
	</div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      visible: false,
      },
  },
  methods: {
    
    
    showPhone() {
    
    
      this.visible = true
    },
  },
};
</script>

获取某些元素

<template>
	<div ref="divRef">
		想要获取的文字
	</div>
	<button @click="onClick">点击获取文字</button>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    },
  },
  methods: {
    
    
    onClick() {
    
    
    // 方便快捷找到dom节点及其属性
      console.log(this.$refs.divRef.innerText)
    },
  },
};
</script>

ref套娃
父组件如何获取子组件中某个子组件的全部参数和方法？
其实就是使用ref套娃

this.$refs.phoneRef.$refs.test.a;

父组件

<template>
	<i-bind-phone ref="phoneRef" :phone="phone" />
</template>

<script>
import PhonePopup from '@/views/personal-center/system-setting/componets/bind-phone';
export default {
    
    
  components: {
    
    
    'i-bind-phone': PhonePopup,
  },

  data() {
    
    
    return {
    
    
      phone: null,
      },
  },
  methods: {
    
    
    // 点击查看手机绑定
    onClickChangePhone() {
    
    
    // 父组件调用子组件中的showPhone方法
      console.log(this.$refs.phoneRef.visible)
      this.$refs.phoneRef.showPhone();
      console.log(this.$refs.phoneRef.$refs.test.a) //123456
    },
  },
};
</script>

子组件

<template>
	<div v-if="visible">
		....
	</div>
	<i-test ref="test" />
</template>

<script>
import Test from '.......';
export default {
    
    
 components: {
    
    
    'i-test': Test,
  },
  data() {
    
    
    return {
    
    
      visible: false,
      },
  },
  methods: {
    
    
    showPhone() {
    
    
      this.visible = true
    },
  },
};
</script>

子组件中的子组件

<template>
	<div ref="divRef">
		想要获取的文字
	</div>
	<button @click="onClick">点击获取文字</button>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      a: 123456
      },
  },
  methods: {
    
    
    onClick() {
    
    
    // 方便快捷找到dom节点及其属性
      console.log(this.$refs.divRef.innerText)
    },
  },
};
</script>

理论上ref套娃可以无限套下去，但没有必要。