vue2 父子传参 ref 怎么从父组件传递到子组件 代码展示 完整代码演示

假设我们有一个父组件 `Parent.vue` 和一个子组件 `Child.vue`，我们可以通过在父组件中给子组件设置 `ref` 属性来获取子组件实例，并通过调用子组件的方法或设置其属性来传递参数。

下面是一个简单的示例：

Parent.vue：

<template>
  <div>
    <Child ref="child"></Child>
    <button @click="handleClick">传递参数到子组件</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    handleClick() {
      const child = this.$refs.child; // 获取子组件实例
      child.setMessage('Hello, Child!'); // 调用子组件的方法传递参数
    }
  }
}
</script>

Child.vue：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    setMessage(message) {
      this.message = message; // 设置子组件的属性
    }
  }
}
</script>

在这个示例中，我们在父组件中给子组件设置了 `ref="child"`，然后在父组件的 `handleClick` 方法中通过 `this.$refs.child` 获取子组件实例，并调用其 `setMessage` 方法传递参数。在子组件中，我们定义了一个 `message` 属性和 `setMessage` 方法，当父组件调用 `setMessage` 方法时，子组件的 `message` 属性会被更新，最终在子组件的模板中展示出来。

完整代码演示可以参考下面的 CodePen：

https://codepen.io/linxin/pen/ExZjJvG