vue 使用ref父子传值

在Vue中可以使用`ref`来获取子组件的实例，从而实现父子组件之间的通信。父组件可以通过`$refs`属性获取子组件的实例，子组件可以通过`$emit`方法触发一个自定义事件，从而将数据传递给父组件。

下面是一个使用`ref`实现父子组件传值的示例：

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <button @click="handleClick">更新子组件的值</button>
    <child ref="myChild" :value="value" @update="handleUpdate"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleClick() {
      this.$refs.myChild.updateValue('hello world')
    },
    handleUpdate(value) {
      console.log('更新父组件的值', value)
      this.value = value
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <p>当前值：{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  methods: {
    updateValue(value) {
      this.$emit('update', value)
    }
  }
}
</script>

在上面的代码中，父组件通过`ref`属性获取了子组件的实例，并将父组件的`value`属性作为`props`传递给了子组件。父组件还监听了子组件触发的`update`事件，并在事件处理函数中更新了父组件的`value`属性。

子组件在`updateValue`方法中触发了`update`事件，并将更新后的值作为参数传递给了父组件。